React-Native的TextInput组件的设置以及获取输入框的内容_react native 控件 百分比控件输入框

大家下午好，自打过了个年啊，对于学习松懈了不少，得麻利的补补课了，这两天在学习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 (<View style={styles.mycontainer}>
                    <TextInput
                        placeholder="请输入用户名"
                        editable={true}//是否可编辑
                        style={styles.inputStyle}//input框的基本样式
                        onChangeText={this._onChangeText}//输入框改变触发的函数
                    />
                    <TouchableOpacity onPress={this.showData.bind(this)}>
                        <View style={styles.btn}>
                            <Text style={styles.wordC}>搜索</Text>
                        </View>
                    </TouchableOpacity>
                </View>)
    }
}
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,
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58