美文网首页React Native开发React Native开发经验集
react-native TextInput 中文输入bug 曲

react-native TextInput 中文输入bug 曲

作者: 越长越圆 | 来源:发表于2018-08-23 21:03 被阅读13次

    在新的Rn 中Textinput ios 输入中文是输不了的一直有bug

    import React, { Component } from 'react';
    import { Platform, TextInput, Text, View, TouchableHighlight,StyleSheet } from 'react-native';
    export default class App extends Component<Props> {
      constructor(props){
        super(props)
        this.state={
          text:''
        }
      }
      render() {
        return (
          <View style={styles.container}>
            <TextInput
              onChangeText={(text) => this.setState({text})}
             value={this.state.text}/>
            <Text>{this.state.text}</Text>
          </View>
        );
      }
      
    }
    

    去跑一边ios 就知道了 TextInput 是输入不了中文的 很神奇

    解决方法 ios 的TextInput
    这里提供一个思路 在onChangeText 不直接方法 缓存起来 当是去焦点的时候才去执行onChangeText 虽然体验不好 希望有人能提供其他方式这里只能曲线救国处理

    import React from 'react'
    
    // // https://github.com/facebook/react-native/issues/18403
    
    const withHandleHandWritingTextInput = (WrappedComponent) => {
        class HandleHandWritingTextInput extends  React.PureComponentnent {
            constructor(props) {
                super(props)
                this.tempText = this.props.value
            }
    
            render() {
                const { onChangeText, onBlur, ...rest } = this.props
                return (
                    <WrappedComponent
                        onChangeText={(text) => {
                            this.tempText = t = text
                        }}
    
                        onBlur={(e) => {
                            if (onChangeText) {
                                onChangeText(xt(this.tempText)
                                )
                            }
                            if (onBlur) {
                                onBlur(e)
                            }
                        }}
                        {...rest}
                    />
                )
            }
        }
    
        return HandleHandWritingTextInput
    }
    
    export default withHandleHandWritingTextInput
    

    然后创建一个自定义的TextInput

    
    import { Platform, TextInput, } from 'react-native';
    import withHandleHandWritingTextInput from './withHandleHandWritingTextInput'
    export default MyTextInput == Platform.OS == 'ios' ? withHandleHandWritingTextInput : TextInput
    

    这段代码 还没在ios上跑 写代码的时候是在window上 但是答题思路是上面这个样子 提供缓存 onChangeText 在是去焦点的时候去赋值 希望有人能更好的方式去解决这个问题

    方案2

    https://github.com/facebook/react-native/pull/18456/files
    这个直接改library 里面的代码效果比上面好

    相关文章

      网友评论

        本文标题:react-native TextInput 中文输入bug 曲

        本文链接:https://www.haomeiwen.com/subject/yxxviftx.html