Как пользоваться прокруткой-tab-вид с реагировать-нативный-маршрутизатор-поток

Question

я хочу использовать реагировать-нативный-прокручивать-элементный ракурс с среагировать нативный-маршрутизатор-потоком и поэтому я создал этот ScrollableTabView:

import React, { 
    Component, 
} from 'react'; 
import ScrollableTabView from 'react-native-scrollable-tab-view'; 
import { DefaultRenderer } from 'react-native-router-flux'; 
import TabBar from './TabBar'; 

class ScrollableTab extends Component { 
    render(){ 
    const state = this.props.navigationState; 

    return (
     <ScrollableTabView renderTabBar={() => <TabBar />} > 
     { 
      state.children.map(el => { 
      return (
       <DefaultRenderer navigationState={el} key={el.key} {...el} tabLabel={el.title} /> 
      ); 
      }) 
     } 
     </ScrollableTabView> 
    ); 
    } 
} 

export default ScrollableTab; 

и это TabBar:

import React from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity, 
    Animated, 
    Component 
} from 'react-native'; 

const styles = StyleSheet.create({ 
    tab: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingBottom: 10, 
    }, 
    tabs: { 
    marginBottom: 70, 
    top: 64, 
    height: 45, 
    flexDirection: 'row', 
    paddingTop: 5, 
    borderWidth: 1, 
    borderTopWidth: 0, 
    borderLeftWidth: 0, 
    borderRightWidth: 0, 
    borderBottomColor: 'rgba(0,0,0,0.05)', 
    }, 
    tabUnderlineStyle: { 
    position: 'absolute', 
    height: 3, 
    backgroundColor: '#3b5998', 
    bottom: 0, 
    }, 
}); 

const propTypes = { 
    goToPage: React.PropTypes.func, 
    activeTab: React.PropTypes.number, 
    tabs: React.PropTypes.array, 
}; 

class TabBar extends Component { 

    render() { 
    return (
     <View style={styles.tabs} > 
     {this.props.tabs.map((tab, i) => { 
      return (
      <TouchableOpacity style={styles.tab} key={tab} onPress={() => this.props.goToPage(i)} > 
       <Text> 
       {tab} 
       </Text> 
      </TouchableOpacity> 
     ); 
     })} 
     </View> 
    ); 
    } 
} 

TabBar.propTypes = propTypes; 

export default TabBar; 

в результате этого:

Вт Он дублирует NavBar? Какие-либо предложения?

Answer 1

Ваш код здесь:

---> state.children.map(el => { 
      return (
       <DefaultRenderer navigationState={el} key={el.key} {...el} tabLabel={el.title} /> 
      ); 
      }) 

state.children вероятно, включает в свой Navbar. попробуйте проверить с console.log(el); вместо возврата. или `console.log (state.children) перед блоком. Трудно сказать, в чем проблема, не зная, что такое ваши props.tabs, и каков ваш компонент более высокого порядка.