實現屏幕中心的標籤

Question

我是新來對付本地的。我在drawernavigator裏面實現了stacknavigator。使用這個庫 「react-navigation」：「^ 1.0.0-beta.11」，

現在我想實現屏幕中心的標籤。下圖是我的屏幕的一部分

我沒有任何想法我怎麼能做到這一點與任何庫或手動推杆的意見。

任何幫助表示讚賞。 感謝

Answer 1

好了，我已經解決了使用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' 
    }, 
});