ReactNative开发——TextInput

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

TextInput的属性

export default@H_403_9@ class@H_403_9@ Project07@H_403_9@ extends@H_403_9@ Component@H_403_9@ {@H_403_9@


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

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

            />
        </View>
        );
    }
}

const@H_403_9@ styles = StyleSheet.create({

    textInputStyle: {
        height: 80@H_403_9@,borderColor: 'grey'@H_403_9@,//边框颜色@H_403_9@
        borderWidth: 1@H_403_9@,//边框线宽@H_403_9@
        margin: 10@H_403_9@,},

等等。。。

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