React-Native的TextInput组件的设置以及获取输入框的内容

大家下午好,自打过了个年啊,对于学习松懈了不少,得麻利的补补课了,这两天在学习React-Native的内容,发现RN的input框和原生input有些区别,特意写下来供小伙伴们参考啊,哈哈哈~
众所周知,原生的input输入框,只要我们写了input标签,它就带有一些默认样式并展现出来,然而RN中的却什么样式也没有,需要自己手动的把样式添加上去才可以显现。
好了,废话不多说,开始上代码~
这里我们用到的RN组件:

StyleSheet:RN的样式组件
Text:显示文本组件
View:是一个支持flexbox布局等的展示容器
TextInput:编辑文本的组件

当然了,操作这些肯定是需要一定的环境的,比如node和XCode等等,本文不做赘述。

本文还是主要介绍怎么在RN中展示一个input框,及获取其内容:

TextInput组件的内容部分:
class Myinput extends Component{
    constructor(props){
        super(props);
        this._onChangeText = this._onChangeText.bind(this);
        this.state = {
            showValue:"",
        }
    }
    _onChangeText(inputData){
        console.log("输入的内容",inputData);
        //把获取到的内容,设置给showValue
        this.setState({showValue:inputData});
    }
    showData(){
        alert(this.state.showValue);//展示输入框的内容
    }
    render(){
        return (
                    "请输入用户名"
                        editable={true}//是否可编辑
                        style={styles.inputStyle}//input框的基本样式
                        onChangeText={this._onChangeText}//输入框改变触发的函数
                    />
                    this.showData.bind(this)}>
                        
                            搜索
                        
                    
                )
    }
}
const styles = StyleSheet.create({
    mycontainer:{
      marginTop:30,
        flexDirection:"row",
    },
    inputStyle:{
        width:280,
        height:30,
        borderColor:"black",
        borderWidth:1,
        marginLeft:5,
    },
    btn:{
        width:85,
        height:30,
        justifyContent:"center",
        alignItems:"center",
        backgroundColor:"green",
        // borderRadius:5
    },
    wordC:{
        color:"white",
        fontSize:18,
    }
})

你可能感兴趣的:(React-Native)