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