React Native 下，TextInput 换行。

在RN版本0.44，长文本编辑，使用TextInput。
出现以下问题：
1：点击软键盘中“回车”按钮，软键盘隐藏。
2：设置blurOnSubmit={false}，点击软键盘中“回车”按钮，没有换行。
3：TextInput设置高度，文字默认是居中显示。设置高度自增长，有闪烁。

根据问题来一步步解决

实现效果

1：点击软键盘中“回车”按钮，软键盘隐藏。
blurOnSubmit 强制设为 false 、

2：设置blurOnSubmit={false}，点击软键盘中“回车”按钮，没有换行。

正常情况下，对于 multiline 设置为 true 的 TextInput，
按下回车，应该会触发 onChange 和 onChangeText 事件；

但是在 Android 下使用中文输入法时，
触发的是 onSubmitEditing 和 onEndEditing 事件。

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

3：TextInput设置高度，文字默认是居中显示。设置高度自增长，有闪烁。
这里使用以下方法来解决这个问题

style={{
        height: DP.dp185,
        width: width,
        fontSize: fontSize,
        textAlignVertical: 'top',//重点 
        color:'#333333',
    }}

最后贴代码

'use strict';
import React, {Component, PropTypes} from "react";

import {
    TextInput,//输入框
    Dimensions,
    Platform,
} from "react-native";

//屏幕宽度,高度 screen（scale为分辨率）
let {width, height} = Dimensions.get('window');
export default class FixedTextInput extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            feedBackText: "",
            selection: {start: 0, end: 0},
        };
        this.onChange = this._onChange.bind(this);
    }

    _latestSubmitEditing = null
    _fixedOnSubmitEditing = e => {
        // 实现只响应第一次 onSubmitEditing 事件
        const latestSubmitEditing = this._latestSubmitEditing
        this._latestSubmitEditing = e.timeStamp
        if (latestSubmitEditing && e.timeStamp - latestSubmitEditing < 200) return
        let value = this.state.feedBackText;
        let length = this.state.feedBackText.length;
        let {start, end} = this.state.selection;
        if (end >= 0 && length >= end) {
            let valueBefore = value.substring(0, end)
            let valueAfter = value.substring(end, length)

            this.setState({
                feedBackText: valueBefore + "\n" + valueAfter,
            })
            if (end != length) {
                const newSelection = {
                    start: start + 1,
                    end: end + 1
                }
                //重新定位光标位置 
                this.setState({
                    selection: newSelection
                })
            }
        }
    }

    _onChange(changeText) {
        this.setState({
            feedBackText: changeText,
        });
    }

    _isNull(str) {
        if (str === "" || str === undefined) return true;
        let regu = "^[ ]+$";
        let re = new RegExp(regu);
        return re.test(str);
    }

    //selection={selection} 设置光标位置
    //onSelectionChange 保存当前光标位置 
    //onSubmitEditing 点击回车按钮的回调函数
    render() {

        let {feedBackText, selection} = this.state;
        return (<TextInput
            selection={selection}
            onSelectionChange={this._onSelectionChange}
            onChangeText={this.onChange}
            value={feedBackText}
            {...this.props}
            multiline={true}
            onSubmitEditing={this._fixedOnSubmitEditing}
            blurOnSubmit={false}/>);
    }

    _onSelectionChange = (event) => {
        this.setState({selection: event.nativeEvent.selection})
    }
}

使用

<View style={{
        height: DP.dp185,
            marginTop: DP.dp17,
            backgroundColor: 'white',
       }}>
         <FixedTextInput
              style={{
                  height: DP.dp185,
                  width: width,
                  fontSize: fontSize,
                 textAlignVertical: 'top',
                 color:'#333333',
             }}
             placeholder={placeholder}
             placeholderTextColor={"#999999"}
             underlineColorAndroid="transparent"
             maxLength={200}
             numberOfLines={8}
         />
  </View>

 

 

转载自

https://blog.csdn.net/cjw8990/article/details/79292341