react-native - 如何使用 createBottomTabNavigator 中的导航按钮

Question

我正在使用 createBottomTabNavigator，因此我无法将导航功能添加到按钮。即我想使用 createBottomTabNavigator 和 createStackNavigator 来创建路线

App.js

import AppNavigator from './navigation/AppNavigator';
...
render() {
 <AppNavigator />
}


AppNavigator.js
import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(createSwitchNavigator({
  Main: MainTabNavigator,
}));



MainTabNavigator.js
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import ColaboradorScreen from '../screens/ColaboradorScreen';

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
           : 'md-information-circle'
      }
    />
  ),
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />
  ),

};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),
};

导出默认 createBottomTabNavigator({ HomeStack, LinksStack, SettingsStack,
});

看到我有 createBottomTabNavigator 并且它工作得很好但是我有一个名为 ColaboradorScreen 的屏幕，我想通过单击按钮打开它。

在我的主屏幕上，我有如何渲染一个按钮

<Button
title="Open C"
onPress={() => navigate('Colaborador')}
/>

如何让我的按钮加载 ContributorScreen？

标签： react-nativenavigationreact-native-android