在我的主屏幕上(我使用App.js作为我的家),我有createStackNavigator和createAppContainer来使用React-Navigation映射所有屏幕。它工作正常,我可以从任何屏幕明确导航到这些屏幕中的任何一个。现在,我想使用“createBottomTabNavigator”在主屏幕上添加一个底部选项卡导航栏。
这是我的代码的简化版本:
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
class HomeScreen extends React.Component {
render() {
return (
<View><Text>Welcome</Text></View>
);
}
}
const AppNavigator = createStackNavigator({
Home: { screen: HomeScreen },
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
Screen3: { screen: Screen3 },
});
export default createAppContainer(AppNavigator);
我想在底部添加一个导航栏,如下所示:
const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen },
Screen3: { screen: Screen3 },
});
export default createAppContainer(TabNavigator);
它不允许在同一页面内有两个“导出默认值”。如何在保持“createStackNavigator”映射我的所有屏幕的同时添加“createBottomTabNavigator”?
像这样的东西。
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
import Screen4 from './Screens/Screen4';
const Home = createStackNavigator({
Screen1, Screen2
});
const List = createStackNavigator({
Screen3, Screen4
});
const TabNav = createBottomTabNavigator({
Home, List
});
export default createAppContainer(TabNav);
在这里你的家可以是Screen1
和Screen2
可以是Screen1的项目和Screen3 and Screen4
相同
您可以使用以下代码:
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
class HomeScreen extends React.Component {
render() {
return (
<View><Text>Welcome</Text></View>
);
}
}
const AppNavigator = createStackNavigator({
Home: { screen: TabNavigator },
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
Screen3: { screen: Screen3 },
});
const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen },
Screen3: { screen: Screen3 },
});
export default createAppContainer(AppNavigator);