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,},

等等。。。

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