react-native TextInput 中文輸入bug 曲線救國

weixin_33890499發表於2018-08-23

在新的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 裡面的程式碼效果比上面好

相關文章