は画面中央にタブを実装しています

Question

私はネイティブに反応する新しいです。私はdrawernavigatorの内部にstacknavigatorを実装しました。このライブラリを使用する "react-navigation"： "^ 1.0.0-beta.11"、

ここでは、タブを画面中央に配置したいと考えています。画像に続いて、私の画面の一部

である私が意見を入れて任意のライブラリまたは手動でこれを行うことができますどのように任意のアイデアを持っていけません。

何か助けていただければ幸いです。 おかげ

Answer 1

まあ、私は基本的にあなたが望むように、ヘッダをレンダリングやスタイル、あなたはSwiperの内側に持ちたいすべてのビューをラップする必要が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' 
    }, 
});