在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>