如何使用react-tab-view与react-native-router-flux

Question

我想使用react-native-scrollable-tab-view和react-native-router-flux，所以我创建了这个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可能包含您的导航栏。尝试使用console.log(el);代替退货。或块之前的`console.log（state.children）。如果不知道你的props.tabs是什么，以及你的高阶组件是什么，很难说出问题是什么。