React-Native进阶_7.TextInput的使用实现搜索功能

前面使用TabBar 实现了底部tab标签，通过stackNavigator 实现了页面跳转，接下来，使用TextInput 来实现一个搜索功能。

TextInput 属性比较多，不一一介绍，具体可以百度搜索或者结合源码。

下面介绍介个比较常用的属性

<TextInput
style={{height:50}}
placeholder ="搜索 ..."// = android　EditText hint 
placeholderTextColor="#6435c9"// = hint color
underlineColorAndroid='transparent'// 下划线透明
   // clearButtonMode="while-editing"
onChangeText={(query) =>{
this.setState({
query:query,
loaded:false,

});// 当内容改变时执行该方法
}}
onSubmitEditing={this.fetchData.bind(this)}
//secureTextEntry
 //   onFocus={() =>console.log('onFocus')} //选中文本框
 //   onBlur={() =>console.log('onBlur')}//离开文本框
  //  onChange={() =>console.log('onChange')}//文本框内容变化
  //  onChangeText={(text) =>console.log(text)}//文本框内容变化，变化的内容
  //  onEndEditing={() =>console.log('onEndEditing')}//文本框编译结束
 //   onSubmitEditing={() =>console.log('onSubmitEditing')}//按下回车键
   // autoFocus
   // defaultValue="火星救援"
   // autoCorrect={false}
//editable={false}
//keyboardType='url' web-search
/>

实现思路跟前面两个页面一样，集合TabBar  在主页面，添加第三个底部tab标签 搜索标签，搜索页面使用TextInput 实现输入框功能

输入框中输入能容点击回车 跳转到搜索结果列表页，由前面的 stackNavigator 实现 ，点击列表页，跳转到详情页，也是由stackNavigator实现。

const App = StackNavigator({    Main: {screen: SearchForm, navigationOptions: {        title: "搜索",        headerLeft: null,        headerStyle:{            elevation: 0        },        headerTitleStyle:{ alignSelf:'center'},    },},    //搜索结果列表    SearchResult: {screen: SearchResult,        navigationOptions:({navigation,screenProps}) =>({                headerTitle: navigation.state.params.title,            }        )    },    //详情页    Detail: {screen: MovieDetail,        navigationOptions:({navigation,screenProps}) =>({                headerTitle: navigation.state.params.info,            }        )    },});

展示UI跟前面的列表相同由ListView 实现。

 render() {        return (            <View style={styles.Container}>                <TabNavigator>                    <TabNavigator.Item                        selected={this.state.selectedTab === 'home'}                        title="推荐电影"                        renderIcon={() => <Image source={TAB_NORMAL_1} style={styles.icon}/>}                        renderSelectedIcon={() => <Image source={TAB_PRESS_1} style={styles.icon}/>}                        badgeText="1"                        onPress={() => this.setState({selectedTab: 'home'})}>                        <Feature/>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab === 'profile'}                        title="北美票房"                        renderIcon={() => <Image source={TAB_NORMAL_2} style={styles.icon}/>}                        renderSelectedIcon={() => <Image source={TAB_PRESS_2} style={styles.icon}/>}                        onPress={() => this.setState({selectedTab: 'profile'})}>                        <USBox/>                    </TabNavigator.Item>                    <TabNavigator.Item                        renderIcon={() => <Image source={{uri:icons.search}} style={styles.icon}/>}                        selected={this.state.selectedTab === 'search'}                        title="搜索"                        onPress={() => this.setState({selectedTab: 'search'})}>                        <Search/>                    </TabNavigator.Item>                </TabNavigator>            </View>        );    }

UI效果展示：

源码下载

不论大神还是新手，欢迎加QQ群一起讨论问题学习技术：230274309