首页 文章

React Native Android键盘突出显示文本问题

提问于
浏览 次
1

在React Native上突出显示输入组件中的文本时出现android问题 .

重启应用程序时功能正常，您可以打开和关闭输入框，输入和发送消息，如下所示：

Normal messaging view

Adding and sending text, text input in correct location

现在，当您按住文本以突出显示它时会出现问题（因此您可以复制/粘贴/剪切文本）：

Highlighted functionality shown at top which then breaks app view state functionality

发生这种情况后，关闭并重新打开文本框具有相同的效果（显示底栏导航） . 键盘现在看起来覆盖在屏幕顶部，因为下面的文本正在呈现，就像键盘被最小化一样，无论它是否处于活动状态 .

这个方面如何破坏键盘应用程序的状态？有人可以链接或通知我如何处理或访问Android顶部显示的复制/粘贴功能吗？没有意义的是，一旦发生这种情况，整个应用程序就会因键盘输入而中断 - 您可以通过重新启动应用程序再次使其工作 .

相关代码如下（如果有什么遗漏只说）：

DeviceEventEmitter代码：

componentDidMount: function(){
    let context = this,

    DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
        context.setState({
            height: context.listViewMaxHeight - e.endCoordinates.height + 50,
        });
    });

    DeviceEventEmitter.addListener('keyboardWillHide', function(e: Event) {
        context.setState({
            height: context.listViewMaxHeight,
        })
    });
}

组件渲染函数中的TextInput组件：

<View style={styles.textInputContainer}>
          <TextInput
            maxNumberOfLines={8}
            multiline={true}
            autoFocus={false}
            editable={true}
            numberOfLines= {5}
            ref='textInput'

            onChangeText={this.onChangeText}
            style={[styles.textInput, {height: context.props.textInputHeight}]}
            placeholder={context.props.placeholder}
            placeholderTextColor="#5A5A5A"
            value={context.state.text}/>

            <Button
                style={styles.sendButton}
                onPress={this._onPress}
                disabled={this.state.disabled}>
            Send </Button>
      </View>
android reactjs react-native

1 回答

  • 0

    解决这个问题的主要第一部分是使用keyboardDidShow和keyboardDidHide而不是keyboardWillShow和keyboardWillHide . （谢谢@pinewood）

    DeviceEventEmitter.addListener('keyboardDidShow', function(e: Event) {
    context.setState({
        height: context.listViewMaxHeight - e.endCoordinates.height + 50,
    });
});

DeviceEventEmitter.addListener('keyboardDidHide', function(e: Event) {
    context.setState({
        height: context.listViewMaxHeight,
    })
});

    第二个组件是确保使用清单来获得所需的键盘功能，目前我们改为：

    <activity android:windowSoftInputMode="stateUnspecified|adjustPan" />

    键盘的问题也在这里更详细 - https://github.com/exponentjs/react-native-tab-navigator/issues/48

    回复于

相关问题