1.问题: 在android 手机上显示下划线 ,怎样去掉该下划线
解决办法:设置属性 underlineColorAndroid 为 transparent
代码示例:
- <TextInput style={styles.textInputStyle} underlineColorAndroid="transparent">
- </TextInput>
2.问题:怎么设置TextInput 的默认值
代码示例:
- <TextInput style={styles.textInputStyle} defaultValue={'我是默认值'} underlineColorAndroid="transparent">
- </TextInput>
3.问题:怎么设置TextInput 的值
(在另一个界面传递过来newValue,怎么将该值显示到TextInput )
解决办法:通常是利用状态机机制,更新 TextInput 的值
代码示例:
界面2:获取值,传递新值
- updateValue(newValue){
- this.prop.setNewValue(newValue);
- }
界面1:接收值 ,显示到控件
- constructor(props){
- super(props);
- this.state = {
- userName:null
- };
- }
- setNewValue(newValue){
- this.setState({
- userName:newValue
- });
- }
- render(){
- return(
- <View>
- <TextInput style={styles.textInputStyle}
- placeholder={'请输入您的手机号或邮箱'} //提示信息
- defaultValue={'我的默认值'}
- onChangeText={(text) => this.setState({userName:text})}
- value ={this.state.userName} //设置值,显示到textInput
- underlineColorAndroid="transparent">
- </TextInput>
- </View>
- );
- }
4. TextInput 多行时,在android 上怎么解决垂直居中问题。
解决办法:这个有2种解决办法(都是设置style 里面的某个属性)设置其左对齐且顶端对齐。
代码示例1
- <TextInput
- placeholder="请描述您的问题"
- multiline = {true} //开区多行
- numberOfLines = {8} //最多8行
- style={contentStyles.textInput_mult}
- maxLength={maxInputWordLength} //设置最多能输入多少个字
- underlineColorAndroid="transparent">
- </TextInput>
- const styles = StyleSheet.create({
- textInput_mult:{
- textAlign:'left',textAlignVertical:'top',alignSelf:'flex-start',justifyContent:'flex-start',alignItems:'flex-start',}
- });
代码示例2
textAlign enum(“auto”,‘left’,‘right’,‘center’,‘justify’)
androidtextAlignVertical enum(‘auto’,‘top’,‘bottom’,‘center’)
- <TextInput
- placeholder="请描述您的问题"
- multiline = {true} //开区多行
- numberOfLines = {8} //最多8行
- style={contentStyles.textInput_mult}
- maxLength={maxInputWordLength} //设置最多能输入多少个字
- underlineColorAndroid="transparent">
- </TextInput>
- const styles = StyleSheet.create({
- textInput_mult:{
- textAlign:'left',androidtextAlignVertical:'top'
- }
- });
暂时只有这些。。。