Question

在主屏幕上（我使用App.js作为主屏幕），我具有带有createAppContainer的createStackNavigator，以使用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”？

Answer 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);

Answer 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);

您的住所可以是Screen1，而Screen2可以是Screen1的项，而Screen3 and Screen4可以是

如何使用createStackNavigator将{{B}}添加到同一屏幕上

2 个答案: