Wie scrollbaren-Tab-Ansicht verwenden mit reagieren-native-Router-flux

Question

i verwenden möchte reagieren-native-scrollbaren-Tab-Ansicht mit reagieren-native-Router-Fluss und so habe ich dieses ScrollableTabView erstellt:

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; 

und diese 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; 

Das Ergebnis ist dieses:

W hy dupliziert er die NavBar? Irgendwelche Vorschläge?

Answer 1

Ihr Code hier:

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

state.children enthält wahrscheinlich die navbar. versuchen Sie es mit console.log(el); anstelle der Rückkehr zu überprüfen. oder `console.log (state.children) vor dem Block. Es ist schwer zu sagen, was das Problem ist, ohne zu wissen, was deine props.tabs sind und was deine Komponente höherer Ordnung ist.