React-Native之TextInput組件的設置以及如何獲取輸入框的內容

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

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

React-Native TextInput組件的設置以及獲取輸入框的內容

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

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

好了，廢話不多說，開始上代碼~

這里我們用到的RN組件：

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

當然了，操作這些肯定是需要一定的環(huán)境的，比如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}//輸入框改變觸發(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中，其實提供的TextInput樣式已經非常強大了，但是事實上有時候我們可能需要自己訂制一個樣式已滿足我們的需求，比如這種

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

如果我們只是把一個默認的TextInput拉出來，會長成這樣最下面這樣

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

所以給TextInput添加一個style樣式

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

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

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

離我們的目標還差一點，現(xiàn)在的問題是，雖然我們移除了下劃線，但是文字的部分始終頂在控件的上面?？赡軙氲接胒lex布局來調整位置，不過flex布局是針對其子控件的，在這里TextInput是一個整體控件，文字部分不屬于它的子控件。所以，既然里面不能調整，我在外面調整總行了吧。

所以，我們可以套一個萬能的View控件，把這個TextInput放到View的底部，設置View的高度大于TextInput的高度，這樣多出來的高度就可以彌補上面沒有的空隙啦。同時記得把View也設置成白色就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,    //通過大于TextInput的高度來彌補上面的問題
        justifyContent: 'flex-end'  //放置到底部
    }

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

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