React-native TextInput初识

1、TextIput 文本

<View style={styles.container}>
          {/* 文本输入框 */}
          <TextInput style={styles.textInputStyle} value="this is the Value"></TextInput>
        </View>

const styles = StyleSheet.create({
     container: {
            flex:1
      },textInputStyle: {
            // 设置尺寸
            width:Dimensions.get('window').width,height:40,marginTop:100,// 设置背景颜色
            backgroundColor:'green'
        }
});

效果图：

2、keyboardType键盘类型

例如：number-pad

3、 multiline设置多行显示

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

效果图：

4、password设置密码显示

password={true}

5、placeholder提示文案

placeholder="请输入账号"
placeholderTextColor="red"

效果图：

6、文本大小写提示

• autoCapitalize：控制TextInput是否要自动将特定字符切换为大写
  
  • none：不自动使用任何东西
  • sentences：每个句子的首字母（默认）
  • words：每一个单词的首字母
  • characters：所有字符

<View style={styles.container}>
                    {/* 文本输入框 */}
                <TextInput  style={styles.textInputStyle} placeholder="none" autoCapitalize="none" ></TextInput>
                {/* 文本输入框 */}
                <TextInput  style={styles.textInputStyle} placeholder="sentences" autoCapitalize="sentences" ></TextInput>
                {/* 文本输入框 */}
                <TextInput  style={styles.textInputStyle} placeholder="words" autoCapitalize="words" ></TextInput>
                {/* 文本输入框 */}
                <TextInput  style={styles.textInputStyle} placeholder="characters" autoCapitalize="characters" ></TextInput>
        </View>

7、autoCorrect：如果为false，会关闭拼写自动修正。默认值是true。

var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                <TextInput  style={styles.textInputStyle} placeholder="没有自动改正拼写" autoCorrect={false} ></TextInput>
                {/* 文本输入框 */}
                <TextInput  style={styles.textInputStyle} placeholder="自动改正拼写" autoCorrect={true} ></TextInput>
                </View>
            );
        }
    });

8、autoFocus：如果为true，在componentDidMount后会获得焦点。默认值为false。

var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput  style={styles.textInputStyle} autoFocus={true} ></TextInput>
                </View>
            );
        }
    });

9、文本清除模式
- clearButtonMode：清除按钮出现的时机
- never：不出现
- while-editing：编辑的时候出现
- unless-editing：没有编辑时出现
- always：总是出现

var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
            <TextInput  style={styles.textInputStyle} placeholder="never" clearButtonMode="never" ></TextInput>
            {/* 文本输入框 */}
            <TextInput  style={styles.textInputStyle} placeholder="while-editing" clearButtonMode="while-editing" ></TextInput>
            {/* 文本输入框 */}
            <TextInput  style={styles.textInputStyle} placeholder="unless-editing" clearButtonMode="unless-editing" ></TextInput>
            {/* 文本输入框 */}
            <TextInput  style={styles.textInputStyle} placeholder="always" clearButtonMode="always" ></TextInput>
                </View>
            );
        }
    });

10、TextInput是否可编辑

<TextInput  style={styles.textInputStyle} editable={false} ></TextInput>

11、enablesReturnKeyAutomatically：如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。

<View style={styles.container}>
                    {/* 文本输入框 */}
                <TextInput  style={styles.textInputStyle} enablesReturnKeyAutomatically={true} ></TextInput>
                {/* 文本输入框 */}
                <TextInput  style={styles.textInputStyle} enablesReturnKeyAutomatically={false} ></TextInput>
                </View>

12、returnKeyType：决定返回键的样式

• default
• go
• google
• join
• next
• route
• search
• send
• yahoo
• done
• emergency-call

<View style={styles.container}>
      {/* 文本输入框 */}
      <TextInput style={styles.textInputStyle} returnKeyType="go"></TextInput>
     {/* 文本输入框 */}
     <TextInput style={styles.textInputStyle} returnKeyType="join"></TextInput>
     {/* 文本输入框 */}
     <TextInput style={styles.textInputStyle} returnKeyType="done"></TextInput>
</View>

13、onChange：当文本框内容变化时调用此回调函数

<View style={styles.container}>
    {/* 文本输入框 */}
    <TextInput style={styles.textInputStyle} onChange={() => {alert('文本框内容改变')}}
    ></TextInput>
</View>

14、onChangeText：当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递

<View style={styles.container}>
   {/* 文本输入框 */}
   <TextInput style={styles.textInputStyle} onChangeText={(Text) => {alert('文字改变')}}
   ></TextInput>
</View>

15、onFocus：当文本框获得焦点的时候调用此回调函数

<View style={styles.container}>
     {/* 文本输入框 */}
     <TextInput style={styles.textInputStyle} onFocus={() => {alert('文本框获得焦点')}}
     ></TextInput>
 </View>

16、onBlur：当文本框失去焦点的时候调用此回调函数

<View style={styles.container}>
    {/* 文本输入框 */}
    <TextInput style={styles.textInputStyle} onBlur={() => {alert('失去焦点')}}
    ></TextInput>
</View>

17、onEndEditing：结束编辑时，调用回调函数

<View style={styles.container}>
   {/* 文本输入框 */}
   <TextInput style={styles.textInputStyle} onEndEditing={() => {alert('结束文本编辑')}}
  ></TextInput>
</View>