Demo展示
搜索框自動(dòng)提示遗锣。此demo分為兩部分，第一是我們自定義輸入框迎吵，RN默認(rèn)的輸入框不是很美觀躲撰；第二個(gè)是自動(dòng)列表提示。demo比較簡(jiǎn)單击费，我們快速的來(lái)實(shí)現(xiàn)它吧拢蛋。
自定義輸入框
在根目錄上新建一個(gè)search.js文件
import React, {Component} from 'react';
import {
StyleSheet,
Text,
TextInput,
PixelRatio,
View
} from 'react-native';
var onePT = 1 / PixelRatio.get();
class SearchComponent extends Component {
render() {
return (
<View style={styles.flex}>
<View style={[styles.inputHeight, styles.flexDirection]}>
<View style={[styles.flex, styles.input]}>
<TextInput
//這里表示輸入自帶的下劃線顏色透明
underlineColorAndroid={'transparent'}
/>
</View>
<View style={styles.btn }>
<Text >搜索</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1
},
flexDirection: {
flexDirection: 'row'
},
input: {
borderWidth: 1,
marginLeft: 5,
paddingLeft: 5,
borderColor: '#ccc',
justifyContent: 'center',
borderRadius: 4
},
inputHeight: {
height: 45
},
btn: {
width: 55,
marginLeft: -5,
marginRight: 5,
backgroundColor: '#23beff',
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 4,
borderTopRightRadius: 4
},
result: {
marginLeft: 5,
marginRight: 5,
height: 200,
borderColor: '#ccc',
borderBottomWidth: 1,
borderRightWidth: 1,
borderLeftWidth: 1
},
resultItem: {
fontSize: 16,
paddingLeft: 10,
paddingTop: 10,
paddingBottom: 10,
borderWidth: onePT,
borderColor: '#ddd'
},
resultItemBottomLine: {
borderBottomWidth: onePT,
borderColor: '#ddd',
}
});
module.exports = SearchComponent;
我們?cè)趇ndex.android.js文件里面使用它
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var SearchComponent = require('./search');
class RNTextInput extends Component {
render() {
return (
<View style={[styles.flex, styles.topStatus]}>
<SearchComponent/>
</View>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1
},
topStatus: {
marginTop: 25
}
});
AppRegistry.registerComponent('RNTextInput', () => RNTextInput);
效果如下：
自動(dòng)提示列表
-
TextInput常用屬性
-
returnKeyType
因?yàn)檫@里的使用場(chǎng)景是搜索，所我們虛擬鍵盤的返回鍵是search
-
placeholder
顯示在輸入前的占位符蔫巩，如“請(qǐng)輸入關(guān)鍵字”谆棱。有點(diǎn)像Android中EditText中的hint提示
-
value
通過(guò)this.state.value修改TextInput的value的變化
-
onEndEditing
用戶結(jié)束編輯時(shí)觸發(fā)該事件，會(huì)將this.state.value寫入圆仔。這樣垃瞧，就能在搜索框中顯示該值
-
onChangeText
監(jiān)聽(tīng)輸入框值的變化，onChangeText獲取的值作為字符串傳入
-
代碼實(shí)現(xiàn)
在serach.js文件添加一些代碼
...
var onePT = 1 / PixelRatio.get();
class SearchComponent extends Component {
//我們可以在構(gòu)造方法中進(jìn)行初始化
constructor(props) {
super(props);
this.state = {
show: false,
};
}
/**
* 顯示搜索結(jié)果
* @param result
*/
showResult(result) {
var result = result;
this.setState({
show: true,
value: result
});
}
/**
* 隱藏搜索結(jié)果
* @param result
*/
hideResult(result) {
this.setState({
show: false,
value: result
});
}
render() {
return (
<View style={styles.flex}>
<View style={[styles.inputHeight, styles.flexDirection]}>
<View style={[styles.flex, styles.input]}>
<TextInput
underlineColorAndroid={'transparent'}
returnKeyType="search"
placeholder="請(qǐng)輸入關(guān)鍵字"
onChangeText={(text)=>this.showResult(text)}
value={this.state.value}
onEndEditing={(text)=>this.hideResult({text})}
/>
</View>
<View style={styles.btn }>
<Text onPress={()=>this.hideResult(this.state.value)}>搜索</Text>
</View>
</View>
{ this.state.show ?
<View style={styles.result}>
<View style={[styles.resultItemBottomLine, styles.flex]}>
<Text style={[styles.resultItem]}
numberOfLines={1}
onPress={this.hideResult.bind(this, this.state.value + '超市')}>
{this.state.value}超市
</Text>
</View>
<View style={[styles.resultItemBottomLine, styles.flex]}>
<Text style={styles.resultItem}
numberOfLines={1}
onPress={this.hideResult.bind(this, this.state.value + '道路')}>
{this.state.value}道路
</Text>
</View>
<View style={[styles.resultItemBottomLine, styles.flex]}>
<Text style={[styles.resultItem]}
numberOfLines={1}
onPress={this.hideResult.bind(this, this.state.value + '綜合商店')}>
{this.state.value}綜合商店
</Text>
</View>
<View style={[styles.resultItemBottomLine, styles.flex]}>
<Text style={[styles.resultItem]}
numberOfLines={1}
onPress={this.hideResult.bind(this, this.state.value + '醫(yī)院')}>
{this.state.value}醫(yī)院
</Text>
</View>
<View style={[styles.flex]}>
<Text style={[styles.resultItem]}
numberOfLines={1}
onPress={this.hideResult.bind(this, this.state.value + '美容院')}>
{this.state.value}美容院
</Text>
</View>
</View>
: null
}
</View>
);
}
}
...
運(yùn)行效果如下：
總結(jié)
我們通過(guò)判斷this.state.show來(lái)確定是否顯示結(jié)果列表坪郭。如果this.state.show是true个从，則顯示。如果是false，則隱藏（null對(duì)象不顯示）嗦锐。
結(jié)果列表的規(guī)則是：輸入關(guān)鍵字＋預(yù)設(shè)關(guān)鍵字鸵隧。這是我們模擬服務(wù)端傳過(guò)來(lái)的數(shù)據(jù)。同時(shí)意推，點(diǎn)擊結(jié)果列表中的某一項(xiàng)豆瘫，應(yīng)該隱藏列表并且將結(jié)果顯示在輸入框中。onPress={this.hideResult.bind(this, this.state.value + '超市')}就是當(dāng)用戶點(diǎn)擊時(shí)菊值，將字符傳結(jié)果輸入的到hide方法中外驱。在js中，調(diào)用有參數(shù)的方法腻窒，我們可以使用bind方法來(lái)傳參昵宇。
hide方法很簡(jiǎn)單，就是將this.state.show設(shè)置為false儿子，這樣會(huì)將結(jié)果列表隱藏起來(lái)了瓦哎。因?yàn)闋顟B(tài)的改變引起了視圖的重新渲染，遇到this.state.show為false柔逼，就不渲染結(jié)果列表了蒋譬。
好了，我們的TextInput組件就學(xué)習(xí)完了愉适，若有不對(duì)之處犯助，還請(qǐng)告知。謝謝维咸！
