Android 下,multiline 的 TextInput 在中文输入法里无法换行啊



  • <TextInput multiline numberOfLines={10} />
    

    使用谷歌拼音输入法,在中文状态下,按回车,就会结束输入;在英文状态下就能正常换行。
    使用搜狗、百度输入法,无论中英文状态,按回车都会结束输入而不是换行。

    RN 0.44.2
    Android 6.0

    大家有碰到这个问题吗



  • 正常情况下,对于 multiline 的 TextInput,按下回车,应该会触发 onChange 和 onChangeText 事件;
    但是在 Android 下使用中文输入法时,触发的是 onSubmitEditing 和 onEndEditing 事件。

    尝试了一下把 blurOnSubmit 强制设为 false,这样可以避免按回车时 input blur,但会变成连着触发两次 onSubmitEditing,不再触发 onEndEditing。

    想了一个临时的解决办法:

    class FixedTextInput extends Component {
        _latestSubmitEditing = null
        _fixedOnSubmitEditing = e => {
            // 实现只响应第一次 onSubmitEditing 事件
            const latestSubmitEditing = this._latestSubmitEditing
            this._latestSubmitEditing = e.timeStamp
            if(latestSubmitEditing && e.timeStamp - latestSubmitEditing < 300) return
    
            if(this.props.onChangeText) {
                this.props.onChangeText(this.props.value + '\n')
            }
        }
    
        render() {
            const fixMultilineProps = Platform.OS === 'android' && this.props.multiline && {
                blurOnSubmit: false,
                onSubmitEditing: this._fixedOnSubmitEditing
            }
            return <TextInput {...this.props} {...fixMultilineProps} />
        }
    }
    


  • @anjianshi 说:

    multiline

    是rn的bug,不知道修复了没有。有临时的解决办法

                <TextInput
                        multiline={true}
                        blurOnSubmit={false}
                        editable={true}
                        maxLength={40}
                        onChangeText={(txt) => {
                            this.setState({ myText: txt })
                        }}
                        value={this.state.myText}
                        onSubmitEditing={() => {
                            if (!this.state.myText.endsWith("\n")) {
                                let myText = this.state.myText;
                                myText = myText + "\n";
                                this.setState({ myText: myText })
                            }
                        }}
                   />
    


  • 我也遇到这个问题,我的RN是0.47.1的。要支持任意位置换行可以参考我找到的后封装的解决方案。希望能帮助到大家:https://github.com/zhangwilling/react-native-multiline-textinput-fix


登录后回复