如何使用 createStackNavigator 将 createBottomTabNavigator 添加到同一屏幕
Posted
技术标签:
【中文标题】如何使用 createStackNavigator 将 createBottomTabNavigator 添加到同一屏幕【英文标题】:How to add createBottomTabNavigator to same screen with createStackNavigator 【发布时间】:2019-08-04 23:05:16 【问题描述】:在我的主屏幕上(我使用 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);
它不允许在同一页面内有两个“导出默认值”。如何添加“createBottomTabNavigator”,同时保留“createStackNavigator”来映射我的所有屏幕?
【问题讨论】:
【参考方案1】:您可以使用如下代码:
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);
【讨论】:
【参考方案2】:类似的东西。
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);
您的 Home 可以是 Screen1
和 Screen2
可以是 Screen1 的一个项目,Screen3 and Screen4
也是如此
【讨论】:
只是一个问题,当您为“主页”声明多个屏幕,然后将“主页”添加到 BottomTabNavigator 时,“主页”选项卡是否始终导航到您声明的第一个屏幕“家”? 首先它会像往常一样导航到第一个屏幕,此处以 screen1 为例,但如果您想添加更多屏幕,您只需将其添加到您的主堆栈中,就像 Screen1、Screen2、Screen3 .然后,如果您需要它导航到某个屏幕示例 Screen3,您只需调用 this.props.navigation.navigate('Screen3', name: 'somename');当你点击某个按钮时以上是关于如何使用 createStackNavigator 将 createBottomTabNavigator 添加到同一屏幕的主要内容,如果未能解决你的问题,请参考以下文章