React native 屏幕中央的机具选项卡

我是个新来的本地人。我已经在抽屉内实现了stacknavigator。使用此库 “反应导航”：“^1.0.0-beta.11”

现在我想在屏幕中央实现选项卡。下图是我屏幕的一部分

我不知道如何使用任何库或手动放置视图来实现这一点

感谢您的帮助。

---

谢谢

我已经用

基本上，您必须将所有希望包含在Swiper中的视图包装起来，并根据需要渲染和设置标题样式

这里有一个我做的工作示例：

render() {
    return (
        <View style={styles.body}>
            <Swiper
              height={500}
              showsPagination={true}
              loop={false}
              renderPagination={this._renderPagination}
              ref={component => this._swiper = component}>
                <View style={styles.page}>
                    <FlatList data={..} renderItem={item => ...} keyExtractor={(item, index) => index} />
                </View>
                <View style={styles.page}>
                    <FlatList data={...} renderItem={item => ...} keyExtractor={(item, index) => index} />
                </View>
                <View style={styles.page}>
                    <FlatList data={...} renderItem={item => ...} keyExtractor={(item, index) => index} />
                </View>
                <View style={styles.page}>
                    <FlatList data={...} renderItem={item => ...} keyExtractor={(item, index) => index} />
                </View>
            </Swiper>
        </View>
    );
}

_renderPagination(index, total, context) {
    return (
        <View style={styles.pagination}>
            {this._renderPaginationHeaders(index, total, context)}
        </View>
    )
}

_renderPaginationHeaders(index, total, context) {
    let ret = [];
    for (let i = 0; i < total; i++) {
        ret.push(
            <TouchableOpacity key={i} style={{ flex: 1, flexDirection: 'column' }} onPress={() => this._onPageChange(i)}>
                <Text style={[styles.title, { flex: 1, textAlign: 'center', textAlignVertical: 'center' }]}>
                    {this._getSectionText(i)}
                </Text>
                <View style={{ height: 5, backgroundColor: index === i ? 'magenta' : 'transparent' }}></View>
            </TouchableOpacity>
        );
    }

return ret;
}

_onPageChange(targetIndex) {
    const currentIndex = this._swiper.state.index;
    const offset = targetIndex - currentIndex;
    this._swiper.scrollBy(offset);
}

const styles = StyleSheet.create({
  body: {
    flex: 1,
    alignItems: 'center',
    alignSelf: 'center',
    backgroundColor: '#f1f1f1',
  },
  pagination: {
    flexDirection: 'row',
    width: Dimensions.get('window').width,
    height: Header.currentHeight * 0.7,
    backgroundColor: '#2E2E2E',
    paddingLeft: 2,
    paddingRight: 2,
    alignItems: 'center',
    position: 'absolute',
    top: 0,
  },
  page: {
    flex: 1,
    marginTop: (Header.currentHeight * 0.7) + 3
  },
  title: {
    color: 'white'
  },
});

render（）{
返回(
这个。_swiper=component}>
…}keyExtractor={（项，索引）=>index}/>
…}keyExtractor={（项，索引）=>index}/>
…}keyExtractor={（项，索引）=>index}/>
…}keyExtractor={（项，索引）=>index}/>
);
}
_渲染图像（索引、总计、上下文）{
返回(
{this._renderPaginationHeaders（索引、总数、上下文）}
)
}
_renderPaginationHeaders（索引、总计、上下文）{
设ret=[]；
for（设i=0；i
{这个。_getSectionText（i）}
);
}
返回ret；
}
_onPageChange（targetIndex）{
const currentIndex=此。_swiper.state.index；
常量偏移=targetIndex-当前索引；
此._swiper.scrollBy（偏移量）；
}
const styles=StyleSheet.create({
正文：{
弹性：1，
对齐项目：“居中”，
对齐自我：“中心”，
背景颜色：“#f1f1”，
},
分页：{
flexDirection:'行'，
宽度：尺寸。获取（'窗口'）。宽度，
高度：收割台当前高度*0.7，
背景颜色：“#2e”，
paddingLeft:2，
paddingRight:2，
对齐项目：“居中”，
位置：'绝对'，
排名：0，
},
第页：{
弹性：1，
边距：（页眉.currentHeight*0.7）+3
},
标题：{
颜色：“白色”
},
});

嘿，我添加了一个工作示例。看一看，让我知道。。。