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