React-native TextInput初识

来源：互联网发布：手机如何删除淘宝评论编辑：程序博客网时间：2024/04/28 02:07

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>

1 0