如何在createBottomTabNavigator中使用导航按钮

时间:2019-01-06 21:02:53

标签: react-native navigation react-native-android

我正在使用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的按钮?

0 个答案:

没有答案