react native TextInput 走过的坑...

前端之家收集整理的这篇文章主要介绍了react native TextInput 走过的坑...前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.问题: 在android 手机上显示下划线 ,怎样去掉该下划线

解决办法:设置属性 underlineColorAndroid 为 transparent
代码示例:

  1. <TextInput style={styles.textInputStyle} underlineColorAndroid="transparent">
  2. </TextInput>

2.问题:怎么设置TextInput 的默认值

代码示例:

  1. <TextInput style={styles.textInputStyle} defaultValue={'我是默认值'} underlineColorAndroid="transparent">
  2. </TextInput>

3.问题:怎么设置TextInput 的值

(在另一个界面传递过来newValue,怎么将该值显示到TextInput )
解决办法:通常是利用状态机机制,更新 TextInput 的值
代码示例:
界面2:获取值,传递新值

  1. updateValue(newValue){
  2. this.prop.setNewValue(newValue);
  3. }

界面1:接收值 ,显示到控件

  1. constructor(props){
  2. super(props);
  3. this.state = {
  4. userName:null
  5. };
  6. }
  7. setNewValue(newValue){
  8. this.setState({
  9. userName:newValue
  10. });
  11. }
  12. render(){
  13. return(
  14. <View>
  15. <TextInput style={styles.textInputStyle}
  16. placeholder={'请输入您的手机号或邮箱'} //提示信息
  17. defaultValue={'我的默认值'}
  18. onChangeText={(text) => this.setState({userName:text})}
  19. value ={this.state.userName} //设置值,显示到textInput
  20. underlineColorAndroid="transparent">
  21. </TextInput>
  22. </View>
  23. );
  24. }

4. TextInput 多行时,在android 上怎么解决垂直居中问题。

解决办法:这个有2种解决办法(都是设置style 里面的某个属性)设置其左对齐且顶端对齐。
代码示例1

  1. <TextInput
  2. placeholder="请描述您的问题"
  3. multiline = {true} //开区多行
  4. numberOfLines = {8} //最多8行
  5. style={contentStyles.textInput_mult}
  6. maxLength={maxInputWordLength} //设置最多能输入多少个字
  7. underlineColorAndroid="transparent">
  8. </TextInput>
  9. const styles = StyleSheet.create({
  10. textInput_mult:{
  11. textAlign:'left',textAlignVertical:'top',alignSelf:'flex-start',justifyContent:'flex-start',alignItems:'flex-start',}
  12. });

代码示例2
textAlign enum(“auto”,‘left’,‘right’,‘center’,‘justify’)
androidtextAlignVertical enum(‘auto’,‘top’,‘bottom’,‘center’)

  1. <TextInput
  2. placeholder="请描述您的问题"
  3. multiline = {true} //开区多行
  4. numberOfLines = {8} //最多8行
  5. style={contentStyles.textInput_mult}
  6. maxLength={maxInputWordLength} //设置最多能输入多少个字
  7. underlineColorAndroid="transparent">
  8. </TextInput>
  9. const styles = StyleSheet.create({
  10. textInput_mult:{
  11. textAlign:'left',androidtextAlignVertical:'top'
  12. }
  13. });

暂时只有这些。。。

猜你在找的React相关文章