您现在的位置:首页 >> 前端 >> 内容

react native TextInput控件的三个相关问题集锦

时间:2018/4/26 13:55:26 点击:

  核心提示:问题一: 输入框下划线不消失问题1. 产生问题的场景: 在 android环境下 textinput 存在下划线情况解决办法:在TextInput 标签下添加 underlineColorAndroi...

问题一: 输入框下划线不消失问题 

1. 产生问题的场景: 在 android环境下 textinput 存在下划线情况

解决办法:在TextInput 标签下添加 underlineColorAndroid = ‘transparent’ 属性 

<TextInput style = {styles.user_input} underlineColorAndroid = 'transparent' value = {'请输入您的用户名'}/>

问题二:输入框输入类型

情景:不同业务输入框输入类型不同

解决办法: 

密码类型:

<TextInput sourceTextEntry = {true} value = {'输入密码'} />

其他类型

{/*默认输入框*/}

<TextInput style={styles.textInputStyle1}/>

{/*设置初始值*/}

<TextInput style={styles.textInputStyle1} defaultValue="我是输入框" />

{/*设置placehold*/}

<TextInput style={styles.textInputStyle1} placeholder="我是输入框 placehold" />

{/*设置占位符颜色*/}

<TextInput style={styles.textInputStyle1} placeholder="我是输入框 placehold" placeholderTextColor="red"/>

{/*设置键盘类型*/}

<TextInput style={styles.textInputStyle1} placeholder="设置键盘类型" keyboardType="number-pad" />

{/*文本输入可以输入多行*/}

<TextInput style={styles.textInputStyle1} multiline={true} />

{/*文本是不可编辑*/}

<TextInput style={styles.textInputStyle1} placeholder="文本是不可编辑" editable={false} />

{/*密文*/}

<TextInput style={styles.textInputStyle1} placeholder="密文" secureTextEntry={true} />

{/*设置最大字数*/}

<TextInput style={styles.textInputStyle1} placeholder="设置最大字数" maxLength={10} />

问题三: 默认占位值及其颜色问题 

1. 很多情况下 输入框需要 填充默认占位值,通常情况下输入框输入前和输入后颜色不一样,因此我们可以设置 他的color 和 value 

2. <TextInput placeholder = {'默认占位值' placeholderColor = '#99999'} 

3. 问他解决

Tags:RE EA AC CT 
作者:网络 来源:NotesChapt