ReactNative开发——TextInput

前端之家收集整理的这篇文章主要介绍了ReactNative开发——TextInput前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ReactNative开发——TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件提供了多种特性的配置,比如自动完成,自动大小写,占位文字,以及多种不同的键盘类型(如数字键盘)等等。

TextInput的属性

export default class Project07 extends Component {


    render() {
        return (
        <View style={{flex:1,justifyContent:'flex-start'}}>
            <TextInput
                style={styles.textInputStyle}
                onChangeText={(text) => console.log(text)}
                // value={this.state.text}
                placeholder={'i am placeholder'} //占位字符串
                autoCapitalize={'words'} //每个单词首字母自动改为大写,不过我在andorid机上并没有看到效果
                placeholderTextColor={'red'} //占位字符串的颜色
                keyboardType={'numeric'} //键盘类型,纯数字键盘
            />

            <TextInput style={{height:80,margin:10}}
                defaultValue={' I am default value'} //默认字符串
                autoCorrect={true} //自动更正用户的输入单词
                editable={true} //设置是否可以编辑
                maxLength={10} //最多允许用户输入多少字符
                multiline={true} //多行
                secureTextEntry={false} //是否密码
                //用户选择在输入框选择的字符串发生改变时,这个回调函数会会回调,传回的参数格式是:{ nativeEvent: { selection: { start,end } }
                onSelectionChange={({nativeEvent})=>
                {console.log(nativeEvent.selection.start+','+nativeEvent.selection.end)}}

            />
        </View>
        );
    }
}

const styles = StyleSheet.create({

    textInputStyle: {
        height: 80,borderColor: 'grey',//边框颜色
        borderWidth: 1,//边框线宽
        margin: 10,},
属性
placehoder 用来设置占位字符串
placehoderTextColor 用来设置占位字符串的颜色
autoCapitalize 字符串类型,它的取值可以是:none,sentences,words,characters,分别代表不自动改变大小写,将每句话的首字母自动改为大写,将每个单词的首字母自动改为大写,将每个英文字自动改为大写
keyboardType 决定弹出键盘的类型,可以取值 default,numeric,emai-address 等等。
caretHidden 是否隐藏光标
defaultValue 默认值
autoCorrect 自动检查单词拼写错误
maxLength 支持的最大长度
secureTextEntry 输入类型是否为密码,如果设置为true,输入的内容将用 * 代替
onChangeText 文字改变后回调
onSelectionChange 长按选择文本时,选择范围变化时调用函数,传回参数的格式形如 { nativeEvent: { selection: { start,end } } }

等等。。。

更多属性请参考官网文档。
http://reactnative.cn/docs/0.44/textinput.html#content

猜你在找的React相关文章