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

前端之家收集整理的这篇文章主要介绍了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,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

原文链接:https://www.f2er.com/react/303290.html

猜你在找的React相关文章