[React Native]高度自增长的TextInput组件
发布时间:2020-12-15 08:30:22 所属栏目:百科 来源:网络整理
导读:之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性。 在开发中,我们有时候有这样的需求,希望输入区域的高度随着输入内容的长度而增长,如下: 这时候我们需要自定义一个组件: 在项目中创建AutoExpandingTextInput.js import React,{
之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性。 在开发中,我们有时候有这样的需求,希望输入区域的高度随着输入内容的长度而增长,如下: import React,{Component} from 'react';
import {AppRegistry,TextInput,StyleSheet} from 'react-native';
export default class AutoExpandingTextInput extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
text: '',height: 0
};
this.onChange = this.onChange.bind(this);
}
onChange(event) {
console.log(event.nativeEvent);
this.setState({
text: event.nativeEvent.text,height:event.nativeEvent.contentSize.height
});
}
onContentSizeChange(params){
console.log(params);
}
render() {
return (
<TextInput {...this.props} //将组件定义的属性交给TextInput
multiline={true}
onChange={this.onChange}
onContentSizeChange={this.onContentSizeChange}
style={[styles.textInputStyle,{height:Math.max(35,this.state.height)}]}
value={this.state.text}
/>
);
}
}
const styles = StyleSheet.create({
textInputStyle: { //文本输入组件样式
width: 300,height: 30,fontSize: 20,paddingTop: 0,paddingBottom: 0,backgroundColor: "grey"
}
});
在多行输入( 接下来修改index.ios.js或者index.android.js 如下: import AutoExpandingTextInput from './AutoExpandingTextInput';
class AwesomeProject extends Component {
_onChangeText(newText) {
console.log('inputed text:' + newText);
}
render() {
return (
<View style={styles.container}>
<AutoExpandingTextInput
style={styles.textInputStyle}
onChangeText={this._onChangeText}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: '#F5FCFF',borderWidth: 1,justifyContent: 'center',alignItems: 'center'
},textInputStyle: { //文本输入组件样式
width: 300,height: 50,backgroundColor: "grey"
}
});
当然我们知道在IOS端TextInput/Text组件默认不会水平居中的,需要在外层额外嵌套一层View,可以参考从零学React Native之10Text 更多精彩请关注微信公众账号likeDev (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |