在 React Native 的 TabNavigator 堆栈上加载一组 StackNavigators >5.xx

Question

我想要在我的屏幕上显示两个 BottomTabNavigators。每个 BottomTabNavigator 都有自己的 StackNavigators，如下所示。任何人都可以帮助我了解如何在最新版本的 React Native 上实现这一点吗？

Error

Edited V3 - Still the same error.

App.js

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {RootNavigator} from './routes';

class App extends Component {
  render() {
    const Nav = RootNavigator();

    return (
      <View style={styles.container}>
        <Nav />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default App;

routes.js I needed separate stacks for Auth and App.


import React, {Component} from 'react';
import {Platform} from 'react-native';
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

// Screens:
import SignIn from './components/auth';

import News from './components/news';
import NewsArticleComponent from './components/news/newsArticle';

import Games from './components/games';
import GamesArticleComponent from './components/games/gamesArticle';

// AuthStack - SignIn
const AuthStack = createStackNavigator();
function AuthScreens() {
  return (
<AuthStack.Navigator>
    <AuthStack.Screen
      name="Auth"
      component={SignIn}
      options={{headerShown: false}}
    />
</AuthStack.Navigator>
  );
}

// News Stack
const NewsStack = createStackNavigator();
function NewsScreens() {
  return (
    <NewsStack.Navigator>
      <NewsStack.Screen name="News" component={News} />
      <NewsStack.Screen name="Article" component={NewsArticleComponent} />
    </NewsStack.Navigator>
  );
}

// Games Stack
const GamesStack = createStackNavigator();
function GamesScreens() {
  return (
    <GamesStack.Navigator>
      <GamesStack.Screen name="Games" component={Games} />
      <GamesStack.Screen name="Article" component={GamesArticleComponent} />
    </GamesStack.Navigator>
  );
}


const Tab = createBottomTabNavigator();
const AppScreens = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="News" component={NewsScreens} />
      <Tab.Screen name="Games" component={GamesScreens} />
    </Tab.Navigator>
  );
};

export const RootNavigator = () => {
  // return createAppContainer({App: AppScreens, Auth: AuthScreens});
  return (
    <NavigationContainer>
      <AuthScreens />
      <AppScreens /> 
    </NavigationContainer>
  );

};

Edited v5

*我想从 AuthStack.Navigator->Auth 导航到 Tab.Navigator->News，下面的 goNext 不起作用。 *

goNext = () => {
    // this.props.navigation.navigate('App');
    // this.props.navigation.navigate('AppScreens', {screen: 'News'});
  };

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';

// Screens:
import SignIn from '../components/auth';

import News from '../components/news';
import NewsArticleComponent from '../components/news/newsArticle';

import Games from '../components/games';
import GamesArticleComponent from '../components/games/gamesArticle';

// AuthStack - SignIn/Register - Public
const AuthStack = createStackNavigator();
function AuthScreens() {
  return (
    <AuthStack.Navigator>
      <AuthStack.Screen
        name="Auth"
        component={SignIn}
        options={{headerShown: false}}
      />
    </AuthStack.Navigator>
  );
}

export const RootNavigatorAuth = ({updateState}) => {
  return (
    <NavigationContainer>
      <AuthScreens />
    </NavigationContainer>
  );
};

// News Stack - Private
const NewsStack = createStackNavigator();
function NewsScreens() {
  return (
    <NewsStack.Navigator>
      <NewsStack.Screen name="News" component={News} />
      <NewsStack.Screen name="Article" component={NewsArticleComponent} />
    </NewsStack.Navigator>
  );
}

// Games Stack - Private
const GamesStack = createStackNavigator();
function GamesScreens() {
  return (
    <GamesStack.Navigator>
      <GamesStack.Screen name="Games" component={Games} />
      <GamesStack.Screen
        name="GamesArticle"
        component={GamesArticleComponent}
      />
    </GamesStack.Navigator>
  );
}

// AppStack - Private
const Tab = createBottomTabNavigator();
const AppScreens = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="News" component={NewsScreens} />
      <Tab.Screen name="Games" component={GamesScreens} />
    </Tab.Navigator>
  );
};

export const RootNavigatorPrivate = () => {
  return (
    <NavigationContainer>
      <AppScreens />
    </NavigationContainer>
  );
};

谢谢，

Zayidu

Answer 1

您必须以新的方式创建堆栈并像下面那样使用它。

//Imports

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const NewsStack = createStackNavigator();

function NewsScreens() {
  return (
    <NewsStack.Navigator>
      <NewsStack.Screen name="News" component={News} />
      <NewsStack.Screen name="NewsArticleComponent" component={NewsArticleComponent} />
    </NewsStack.Navigator>
  );
}

const GamesStack = createStackNavigator();

function GamesScreens() {
  return (
    <GamesStack.Navigator>
      <GamesStack.Screen name="Games" component={Games} />
      <GamesStack.Screen name="GamesArticleComponent" component={GamesArticleComponent} />
    </GamesStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();
function Tabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="News" component={NewsScreens} />
      <Tab.Screen name="Games" component={GamesScreens} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer><Tabs/></NavigationContainer>
  );
}

你可以在这里参考文档 https://reactnavigation.org/docs/stack-navigator/

更新

App.js

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { RootNavigator } from './screens';

function App() {
  return (
    <View style={styles.container}>
      <RootNavigator />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default App;

screens.js

import React, { Component } from 'react';
import { Platform, View, Text } from 'react-native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// Screens:
import SignIn from './components/auth';

import News from './components/news';
import NewsArticleComponent from './components/news/newsArticle';

import Games from './components/games';
import GamesArticleComponent from './components/games/gamesArticle';


// AuthStack - SignIn
const AuthStack = createStackNavigator();
function AuthScreens() {
  return (
    <AuthStack.Navigator>
      <AuthStack.Screen
        name="Auth"
        component={SignIn}
        options={{ headerShown: false }}
      />
    </AuthStack.Navigator>
  );
}

// News Stack
const NewsStack = createStackNavigator();
function NewsScreens() {
  return (
    <NewsStack.Navigator>
      <NewsStack.Screen name="News" component={News} />
      <NewsStack.Screen name="Article" component={NewsArticleComponent} />
    </NewsStack.Navigator>
  );
}

// Games Stack
const GamesStack = createStackNavigator();
function GamesScreens() {
  return (
    <GamesStack.Navigator>
      <GamesStack.Screen name="Games" component={Games} />
      <GamesStack.Screen name="Article" component={GamesArticleComponent} />
    </GamesStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();
const AppScreens = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="News" component={NewsScreens} />
      <Tab.Screen name="Games" component={GamesScreens} />
    </Tab.Navigator>
  );
};

export const RootNavigator = () => {
  // return createAppContainer({App: AppScreens, Auth: AuthScreens});
  return (
    <NavigationContainer>
      <AuthScreens />
    </NavigationContainer>
  );
};

在 React Native 的 TabNavigator 堆栈上加载一组 StackNavigators >5.xx

Load a Set of StackNavigators on a TabNavigator Stack in React Native >5.xx

react-native

react-native-ios

react-native-navigation