react-nativa仿照美团。第二页附近的一级界面

添加tab标签页的依赖

yarn add react-native-scrollable-tab-view

具体可以去giehub官网了解详情

<View style={styles.container}>
                    <Header/>
                    <View style={{height: 1,backgroundColor:'#000000'}}/>
                    <ScrollableTabView style={styles.ScrollableTabView}
                                       tabBarBackgroundColor={'#ffb92e'}
                                       tabBarActiveTextColor={'#000000'}
                                       tabBarUnderlineStyle={styles.tabBarUnderline}
                                       tabBarTextStyle={styles.tabBarTextStyle}
                                       tabBarInactiveTextColor={'#FFFFFF'}
                                       initialPage={0}
                                       locked={false}
                                       renderTabBar={() => <ScrollableTabBar/>}>
                        <View tabLabel={data[0].title} style={styles.container}><TopNavigationItem tabListData={data[0].tab}/></View>
                        <View tabLabel={data[1].title} style={styles.container}><TopNavigationItem tabListData={data[1].tab}/></View>
                        <View tabLabel={data[2].title} style={styles.container}><TopNavigationItem tabListData={data[2].tab}/></View>
                        <View tabLabel={data[3].title} style={styles.container}><TopNavigationItem tabListData={data[3].tab}/></View>
                    </ScrollableTabView>
                </View>

在开始的时候虽然添加上了tab标签但是下边始终是空白页面，不显示内容（如图），在最外层加了flex：1就好了。还有一些属性及默认值很好理解。

每一个页面，这里我只用了一个页面传入不同的参数，加载了4次构成的

//头部数据
        let {tabListData} = this.props;
        let tabTexts = [];
        for (let i = 0; i < tabListData.length; i++) {
            tabTexts.push(
                //点击改变当前text的背景色
                //知道点击的是第几个就在状态中存索引，重新绘制添加text到数组，当状态等等于索引的时候添加另一个text
                i == this.state.bState ?
                    <TouchableNativeFeedback
                        key={i}
                        onPress={() => this._onPressButton(i)}>
                        <Text style={[styles.text, {backgroundColor: '#000000', color: '#FFFFFF',}]}
                              key={i}>{tabListData[i]}</Text>
                    </TouchableNativeFeedback> :
                    <TouchableNativeFeedback key={i}
                                             onPress={() => this._onPressButton(i)}>
                        <Text style={styles.text} key={i}>{tabListData[i]}</Text>
                    </TouchableNativeFeedback>
            )
        }
        if (this.state.isShowActivityIndicator) {
            return (
                <ActivityIndicator animating={this.state.isShowActivityIndicator}
                                   size={'large'}
                                   style={styles.container}
                />
            );
        } else {
            return (
                <View style={styles.view}>

                    <FlatList
                        keyExtractor={(item, index) => (item.id)}
                        data={this.state.food}
                        renderItem={({item, index}) => this.renderItem(item, index)}
                        ItemSeparatorComponent={ItemDivideComponent}
                        ListHeaderComponent={<View style={[styles.view,{marginBottom: 5,marginTop: 5}]}>{tabTexts}</View>}
                        refreshControl={<RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />}
                    />
                </View>
            )
        }

这里的头部布局是我自己用text组件拼成的，setState刷新状态产生的选中效果。而在状态中记录了点击第几个，在刷新时判断这个加载哪一个text就好了