React-native：如何使用自定义 TabBarComponent 获取 navigationOptions

Question

我是本机反应的新手，我正在尝试构建自定义标签栏，但在尝试显示图标标签栏时遇到问题。 这是我到目前为止所取得的成就。

这是我的自定义 TabBar 组件：

class TabBar extends Component {
    renderItem = (route, index) => {
      const {
        navigation,
        jumpToIndex,
      } = this.props;

      const isCapture = route.routeName === 'AddExpenses';

      const focused = index === navigation.state.index;
      const color = focused ? activeTintColor : inactiveTintColor;
      if (isCapture === true) {
        return (
          <TouchableOpacity
            key={route.key}
            style={Styles.tab}
            onPress={() => (navigation.navigate('AddExpensesModal'))}
          >
            <Ionicons
              name={ioniconsByPlatform('add-circle')}
              style={Styles.icon}
              size={26}
            />
          </TouchableOpacity>
        );
      }
      return (
        <TouchableWithoutFeedback
          key={route.key}
          style={Styles.tab}
          onPress={() => (isCapture ? navigation.navigate('CaptureModal') : jumpToIndex(index))}
        >
          <View style={Styles.tab}>
            <Text style={{ color }}>{route.routeName}</Text>
          </View>
        </TouchableWithoutFeedback>
      );
    }

    render() {
      const {
        navigation,
      } = this.props;

      const {
        routes,
      } = navigation.state;

      return (
        <View style={Styles.tabBar}>
          {routes && routes.map(this.renderItem)}
        </View>
      );
    }
}
export default TabBar;

我的标签导航器：

const MainTabNavigator = TabNavigator({
  Summary: { screen: SummaryScreen },
  AddExpenses: { screen: ExpensesScreen },
  Expenses: { screen: ExpensesScreen },
}, {
  tabBarComponent: TabBar,
});

export default MainTabNavigator;

还有一个我尝试设置 TabBarIcon 的屏幕示例：

const SummaryScreen = () => (
  <View style={Styles.container}>
    <Text>Summary</Text>
  </View>
);


SummaryScreen.navigationOptions = {
  title: 'Summary',
  tabBarIcon: props => <TabBarIcon {...props} name="pulse" />,
};

export default SummaryScreen;

感谢 navigationOptions 属性，我希望能够显示我的标签栏图标。 你知道我该怎么做吗？

Answer 1

如果您觉得 TabNavigator 不够强大（我认为它远非强大），您可以随时自定义导航器视图。

这是我自定义导航器视图以替换 TabNavigator 的笔记：

    export default class SectionTabView extends React.Component {

    static propTypes = {
        navigation: PropTypes.object
    };

    constructor(props) {
        super(props);
    }

    render() {
        const {router, navigation} = this.props;
        const {routes, index} = navigation.state;

        /**
         * ActiveScreen is the current screen you see when you change you navigation state in tab bar
         */
        const ActiveScreen = router.getComponentForState(navigation.state);

        return (
            <View style={Styles.section_container}>
                <ActiveScreen
                    navigation={addNavigationHelpers({
                        ...navigation,
                        state: routes[index],
                    })}
                />
                <SectionTabBar navigation={navigation}/>
            </View>
        );
    }
}

export default class SectionTabBar extends React.Component {

    static propTypes = {
        navigation: PropTypes.object
    };

    constructor(props) {
        super(props);
    }

    getTabButtomGroupView() {
        const {navigation} = this.props;
        const {routes, index} = navigation.state;

        let tabButtomGroupView = [];

        routes.map((route) => {
            let styles = [Styles.eventSection_tab];
            const isClicked = routes[index].routeName === route.routeName;

            if(isClicked){
                styles.push(Styles.eventSection_tabClicked);
            }

            tabButtomGroupView.push(
                <TouchableOpacity
                    onPress={() => {
                        /**
                         * when the routeName is equal to current routeName, we should stop navigate action
                         */
                        if (routes[index].routeName === route.routeName) {
                            return;
                        }
                        navigation.navigate(route.routeName);
                    }}
                    style={styles}
                    key={route.routeName}>

                    <Text style={{color:'white'}}>{SectionRouteConfig[route.routeName].navigationOptions.title}</Text>

                </TouchableOpacity>
            )
        });

        return tabButtomGroupView;
    }

    render() {

        return (
            <View style={Styles.section_tabContainer}>
                {this.getTabButtomGroupView()}
            </View>
        );
    };
}

//SectionRouteConfig.js
export const sectionRouteConfig = {
    XXX: {
        screen: XXX, navigationOptions: {
            title: XXX
        }
    },
    XXX: {
        screen: XXX, navigationOptions: {
            title: XXX
        }
    }
};

export const SectionNavigator = createNavigator(TabRouter(sectionRouteConfig))(SectionTabView);

//Usage
render() {
        const {dispatch, navigationState} = this.props;
        return (
            <SectionNavigator
                navigation={
                    addNavigationHelpers({
                        dispatch: dispatch,
                        state: navigationState
                    })
                }
            />
        )
    }

顺便说一句，我也使用 redux。

如果这些代码对你来说太多了，你可以在这里查看官方示例：https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/CustomTabs.js