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>