一、實例

　　先看一下我要做的搜索框的樣子

• 需要一個Image，和一個TextInput
• 去掉默認下劃線 underlineColorAndroid=‘transparent‘
• 設置光標顏色 selectionColor=‘#ff4f39‘
• 自動獲取焦點 autoFocus={true}

　　　　　　<View style={styles.searchBox}> 
                <Image source={require(‘../../img/search.png‘)} style={styles.searchImg}/>
                <TextInput 
                    underlineColorAndroid
 
=‘transparent‘ 
                    autoFocus={true}
                    placeholder=‘歡聚有味‘
                    placeholderTextColor=‘#999‘
                    selectionColor=‘#ff4f39‘
                    style={styles.inputText}
                    onChangeText={(text) => this.setState({text})}
                
 
/>
            </View>

樣式

• 在他們的父容器設置 flexDirection: ‘row‘，讓它們橫著排
• 搜索框本身帶有padding，所以設置padding為0，否則height為30放不下

　　searchBox:{
        flexDirection: ‘row‘,
        alignItems:‘center‘,
        backgroundColor:‘#fff‘,
        width:width*0.9,
        borderRadius:5,
        height:30,
    },
    searchImg:{
        marginLeft:
 
15,
        marginRight:10,
    },
    inputText:{
        width:width*0.8-50,
        padding:0,
    },

未完待續。。。

React Native隨筆——組件TextInput