react native TextInput 走过的坑...

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'
   }
});

暂时只有这些。。。

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...