Question

使用React Native TextInput，当在可见键盘的情况下点击Back-Button（屏幕截图中的红色1）时，可以在稍后的某个时间编辑TextInput值。但是，当点击检查/输入图标（屏幕截图中的红色2）时，在键盘消失后无法更改TextInput。在此之后点击输入时，插入符号会在点击过程中出现，然后消失，并且什么也没有发生。

这是我的组件：

export class MyInput extends Component {
    constructor (props) {
        super(props);
        this.state = {
            inputValue: `${Date.now()}-document`,
        };

        this.onFocus = this.onFocus.bind(this);
    }
    onFocus (text) {
        if (this.placeholderRemoved) {
            return text;
        }
        this.textInput.clear();
        this.placeholderRemoved = true;

        return '';
    }
    render () {
        return (
            <KeyboardAvoidingView>
                <TextInput
                     value={this.state.inputValue}
                     onChangeText={(text) => {
                         this.setState({inputValue: text});
                     }}
                />
            </KeyboardAvoidingView>
        );
    }
}

经过测试：

小米Pocophone F1，Android 8.1
Google Pixel 2（仿真器），Android 7.1.1

关闭键盘后如何启用TextInput的编辑？

在@Sean Wangs请求后编辑

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
import {MyInput} from './myInputViewComponent';

export default class myApp extends Component {
  render() {
    return (
      <View>
        <MyInput />
      </View>
    );
  }
}

AppRegistry.registerComponent('myApp', () => myApp);

"react": "16.7.0", "react-native": "0.57.6",

Answer 1

我能够重现您的问题，而确实是RN版本0.57.6的问题。因此，在这种情况下，您的解决方案是使用RN版本0.57.7或更高版本，并且此问题应得到解决。

这进一步得到确认，因为0.57.6的发布日志指出TextInput中引入了某个问题，该问题已针对0.57.7及以后的版本进行了修复。

参考：https://github.com/facebook/react-native/releases/tag/v0.57.6

Answer 2

使用模拟器或模拟器的软键盘。您可以从硬件菜单中检查键盘属性并在其中搜索。

关闭键盘后禁用TextInput

2 个答案: