TextInput组件在ios上自带输入法下无法输入中文的情况 ---- react-native 0.55

版权声明：原创文章，未经允许不得转载！！！ https://blog.csdn.net/halo1416/article/details/82703503

最近，遇到了一个情况，react-native的TextInput组件在ios平台只有自带输入法（没有安装其他的第三方输入法）的情况下，没有办法输入中文。

大概原因：react-native在0.55的版本下，TextInput组件有一些的bug！！不能使用它的 value 或 defaultValue 属性！！

代码如下：

情况1：

<TextInput
    underlineColorAndroid="transparent"
    style={{height: 40, flex:1,paddingHorizontal:6}}
    onChangeText={(text) => this.setState({taskName : text})}
    value={this.state.taskName}     //初始值为空字符串
    placeholder='添加任务名称'
/>

情况2：

<TextInput 
    underlineColorAndroid="transparent"
    multiline={true}
    style={{
         borderWidth: 1,
         borderColor: '#E8E8E8',
         borderRadius: 6,
         height: 180,
         padding: 10,
         textAlignVertical:'top',
    }}
    defaultValue={this.state.taskDesc}       //初始值为空字符串
    placeholder='请添加描述'
    onChangeText={(text) => this.setState({taskDesc : text})}
/>

在以上两种情况下，用ios的自带输入法输入中文时，没有可以选择的中文字符，只能输入英文。

解决办法：去除 value 或 defaultValue 属性！！！

即：

<TextInput
    underlineColorAndroid="transparent"
    style={{height: 40, flex:1,paddingHorizontal:6}}
    onChangeText={(text) => this.setState({taskName : text})}
    placeholder='添加任务名称'
/>

//或

<TextInput 
    underlineColorAndroid="transparent"
    multiline={true}
    style={{
         borderWidth: 1,
         borderColor: '#E8E8E8',
         borderRadius: 6,
         height: 180,
         padding: 10,
         textAlignVertical:'top',
    }}
    placeholder='请添加描述'
    onChangeText={(text) => this.setState({taskDesc : text})}
/>

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！