React-Native Text，TextInput控件常见问题及解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/szk972092933/article/details/82684046

1.在使用React-Navtive<Text>标签时，有时会出现一行内容显示不开的情形，此时需要Text的高度随着文字内容的增加，而增加。

<View style={styles.flexRow}>
    <Text style={styles.text}>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        啦啦啦啦啦
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</Text>
</View>

此时可以设置view的样式设置最小高度，及间距，即可

flexRow:{
    flexDirection: 'row',
    minHeight: 40,
    padding: 10,
    borderBottomWidth:1,
    borderTopWidth:1,
},

text:{
    fontSize:11,
    color:'#000',
},

效果图

2.在使用TextFeild时如果设置value值为state里的一个属性，并且在onChangeState方法里，改变这个state那么会造成，每当输入内容时，造成TextField刷新，导致输入不正常，因此应该避免此种情况。

<TextInput style={{flex:1,backgroundColor: 'red'}} 
   value={String(this.state.inputValue) } 
   onChangeText={(text) => this.setState({inputValue:text})}>
 </TextInput>

3.在设置样式时,若想，一个父视图里的某个子视图充满剩余的空间，那么需要将其style 中flex设置为1，并将其余子视图大小固定即可。

<View style={{flexDirection:'row',width: width,justifyContent: 'flex-start',alignItems: 'center',height:44}}>
    <Text style={{width:100,color:'#000',backgroundColor:'yellow'}}>里程</Text>
    <TextInput style={{flex:1,backgroundColor: 'red'}}
               onChangeText={(text) => this.setState({inputValue:text})}/> 
    <Text style={{width:100,color:'#000',textAlign: 'right',backgroundColor:'blue'}}>公里</Text>
</View>