实现屏幕中心的标签

问题描述：

我是新来对付本地的。我在drawernavigator里面实现了stacknavigator。使用这个库 “react-navigation”：“^ 1.0.0-beta.11”，实现屏幕中心的标签

现在我想实现屏幕中心的标签。下图是我的屏幕的一部分

我没有任何想法我怎么能做到这一点与任何库或手动推杆的意见。

任何帮助表示赞赏。感谢

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

答

好了，我已经解决了使用react-native-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' 
    }, 
});

实现屏幕中心的标签

相关推荐