快捷導(dǎo)航

React-Native之TextInput組件的設(shè)置以及如何獲取輸入框的內(nèi)容

更新時(shí)間：2023年05月11日 10:38:45 作者：TimePawnshop.

這篇文章主要介紹了React-Native之TextInput組件的設(shè)置以及如何獲取輸入框的內(nèi)容問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React-Native TextInput組件的設(shè)置以及獲取輸入框的內(nèi)容

這兩天在學(xué)習(xí)React-Native的內(nèi)容，發(fā)現(xiàn)RN的input框和原生input有些區(qū)別，特意寫(xiě)下來(lái)供小伙伴們參考。

眾所周知，原生的input輸入框，只要我們寫(xiě)了input標(biāo)簽，它就帶有一些默認(rèn)樣式并展現(xiàn)出來(lái)，然而RN中的卻什么樣式也沒(méi)有，需要自己手動(dòng)的把樣式添加上去才可以顯現(xiàn)。

好了，廢話不多說(shuō)，開(kāi)始上代碼~

這里我們用到的RN組件：

StyleSheet：RN的樣式組件
Text：顯示文本組件
View：是一個(gè)支持flexbox布局等的展示容器
TextInput：編輯文本的組件

當(dāng)然了，操作這些肯定是需要一定的環(huán)境的，比如node和XCode等等，本文不做贅述。

本文還是主要介紹怎么在RN中展示一個(gè)input框，及獲取其內(nèi)容：

TextInput組件的內(nèi)容部分：
class Myinput extends Component{
    constructor(props){
        super(props);
        this._onChangeText = this._onChangeText.bind(this);
        this.state = {
            showValue:"",
        }
    }
    _onChangeText(inputData){
        console.log("輸入的內(nèi)容",inputData);
        //把獲取到的內(nèi)容，設(shè)置給showValue
        this.setState({showValue:inputData});
    }
    showData(){
        alert(this.state.showValue);//展示輸入框的內(nèi)容
    }
    render(){
        return (<View style={styles.mycontainer}>
                    <TextInput
                        placeholder="請(qǐng)輸入用戶名"
                        editable={true}//是否可編輯
                        style={styles.inputStyle}//input框的基本樣式
                        onChangeText={this._onChangeText}//輸入框改變觸發(fā)的函數(shù)
                    />
                    <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,
    }
})

React-Native自定義TextInput樣式

在react-native中，其實(shí)提供的TextInput樣式已經(jīng)非常強(qiáng)大了，但是事實(shí)上有時(shí)候我們可能需要自己訂制一個(gè)樣式已滿足我們的需求，比如這種

所以這篇就是介紹如何去訂制。

如果我們只是把一個(gè)默認(rèn)的TextInput拉出來(lái)，會(huì)長(zhǎng)成這樣最下面這樣

分析一下，我們需要去除下劃線，把背景設(shè)置成白色，同時(shí)可以略微調(diào)整一下字體大小。

所以給TextInput添加一個(gè)style樣式

<TextInput
    style={styles.edit}
    underlineColorAndroid='transparent'/>
edit: {
        marginTop: 30,
        height: 40,
        fontSize: 20,
        backgroundColor: '#fff'
    },

為了和上面的控件留有一定的距離，我們可以加一個(gè)marginTop屬性。

這樣，現(xiàn)在的輸入框就變成了這個(gè)樣式了。

離我們的目標(biāo)還差一點(diǎn)，現(xiàn)在的問(wèn)題是，雖然我們移除了下劃線，但是文字的部分始終頂在控件的上面?？赡軙?huì)想到用flex布局來(lái)調(diào)整位置，不過(guò)flex布局是針對(duì)其子控件的，在這里TextInput是一個(gè)整體控件，文字部分不屬于它的子控件。所以，既然里面不能調(diào)整，我在外面調(diào)整總行了吧。

所以，我們可以套一個(gè)萬(wàn)能的View控件，把這個(gè)TextInput放到View的底部，設(shè)置View的高度大于TextInput的高度，這樣多出來(lái)的高度就可以彌補(bǔ)上面沒(méi)有的空隙啦。同時(shí)記得把View也設(shè)置成白色就Ok了。

<View style={styles.view}>
    <TextInput      
        style={styles.edit}
        underlineColorAndroid='transparent'/>
</View>
    edit: {
        height: 40,
        fontSize: 20,
        backgroundColor: '#fff',
        marginLeft: 10,  //左右留出一定的空間
        marginRight: 10
    },
    view: {
        flex: 1,
        marginTop: 10,
        backgroundColor: '#fff',
        height: 51,    //通過(guò)大于TextInput的高度來(lái)彌補(bǔ)上面的問(wèn)題
        justifyContent: 'flex-end'  //放置到底部
    }

看代碼就可以很明白了吧，最后為了更加協(xié)調(diào)和美觀，可以給TextInput左右兩邊添加margin值，這樣文字就不會(huì)直接抵在最邊上了。

好了，有了一個(gè)這樣的思路，相信大家就可以自己訂制自己需要的樣式了。最后來(lái)一句，一定要用好View控件?。。?/p>