React-Native 嵌套導航在 expo 中不起作用

Question

我正在使用 React Native Stack Navigation 在我的應用程序中配置 header，然后在其中嵌套一個抽屜導航。

在 android 仿真器中，一切正常。 但是，每當我嘗試使用 expo 打開應用程序時，就只有一個白色的空白屏幕。 開發人員工具沒有記錄任何錯誤，Expo 本身沒有給我錯誤，終端也沒有。

我嘗試用<Text>組件替換整個導航，在這種情況下 Expo 顯示文本。 但我似乎無法找到我做錯了什么。 一些幫助將不勝感激，因為我剛剛學習 React Native。

這是我的代碼：

索引.tsx

import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

應用程序.tsx

import React, {Component} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import RootStack from './src/__plugins/navigation';

export default class App extends Component {
  render() {
    return (
        <NavigationContainer>
            <RootStack />
        </NavigationContainer>
    );
  }
}

導航/index.tsx

import {createStackNavigator} from '@react-navigation/stack';
import SignOutModalScreen from '../../_view/SignOutModalScreen';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {faBars, faSignOutAlt, faTimes} from '@fortawesome/free-solid-svg-icons';
import {StyleSheet} from 'react-native';
import StartDrawer from './StartDrawer';
import {DrawerActions} from '@react-navigation/native';

export enum RoutingStack {
    START = 'start',
    GAME = 'main'
}

export enum RoutingDrawer {
    START = 'start',
    GAME = 'game'
}

export enum RoutingIdentifier {
    JOIN_SCREEN = 'join',
    GAME_SCREEN = 'game',
    HELP_SCREEN = 'help',
    SIGNOUT_SCREEN = 'sign_out'
}

const Stack = createStackNavigator();

const RootStack = () => {
    return (
        <Stack.Navigator
          mode="modal"
          screenOptions={({ navigation }) => ({
            headerStyle: {
              backgroundColor: '#80cbc4',
            },
            headerLeft: () => {
              return (
                <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer)}>
                  <FontAwesomeIcon icon={faBars} style={styles.menuIcon} />
                </TouchableOpacity>
              );
            },
            headerRight: () => {
              return (
                <TouchableOpacity onPress={() => navigation.navigate(RoutingIdentifier.SIGNOUT_SCREEN)}>
                  <FontAwesomeIcon icon={faSignOutAlt} style={styles.signOutIcon} />
                </TouchableOpacity>
              );
            },
          })}
        >
            <Stack.Screen
              name={RoutingDrawer.START}
              component={StartDrawer}
              options={{ title: '' }}
            />

            <Stack.Screen
              name={RoutingIdentifier.SIGNOUT_SCREEN}
              component={SignOutModalScreen}
              options={({ navigation }) => ({
                headerTitle: '',
                headerStyle: {
                  elevation: 0,
                  backgroundColor: '#F5FCFF',
                },
                headerLeft: () => {
                  return (
                    <TouchableOpacity onPress={() => navigation.navigate(RoutingDrawer.START)}>
                      <FontAwesomeIcon icon={faTimes} style={styles.closeIcon} />
                    </TouchableOpacity>
                  );
                },
              })}
            />
        </Stack.Navigator>
    );
};

const styles = StyleSheet.create({
    closeIcon: {
        marginStart: 10,
        color: 'black',
    },
    menuIcon: {
        marginStart: 10,
        color: 'white',
    },
    signOutIcon: {
        marginEnd: 10,
        color: 'white',
    },
});

export default RootStack;

和StartDrawer.tsx

import {createDrawerNavigator} from '@react-navigation/drawer';
import {RoutingIdentifier} from './index';
import JoinPage from '../../join/_view/JoinScreen';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {faQuestionCircle, faSignInAlt} from '@fortawesome/free-solid-svg-icons';
import {StyleSheet} from 'react-native';
import {trans} from '../i18n';

const Drawer = createDrawerNavigator();

const StartDrawer: FC = () => {
    return (
        <Drawer.Navigator drawerType="slide" hideStatusBar={false}>
            <Drawer.Screen
                name={RoutingIdentifier.JOIN_SCREEN}
                component={JoinPage}
                options={{
                    drawerLabel: trans.getString('MENU_START_GAME'),
                    drawerIcon: () => (
                        <FontAwesomeIcon icon={faSignInAlt} style={styles.icon} />
                    ),
                }}
            />
            <Drawer.Screen
                name={RoutingIdentifier.HELP_SCREEN}
                component={() => null}
                options={{
                    drawerLabel: trans.getString('MENU_HELP'),
                    drawerIcon: () => (
                        <FontAwesomeIcon icon={faQuestionCircle} style={styles.icon} />
                    ),
                }}
            />
        </Drawer.Navigator>
    );
};

const styles = StyleSheet.create({
    icon: {
        marginEnd: -20,
        marginStart: 10,
    },
});

export default StartDrawer;

Answer 1

我不確定，但您是否嘗試過相反的方法？ 堆在抽屜里而不是抽屜里堆？

我在這方面取得了很好的成績。 也許我的根導航器可以幫助你。 嘗試將其用作模板（我前段時間寫過這段代碼，所以我不記得具體細節但效果很好）：

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { fetchPaymentMethods } from 'reducers/paymentMethods';
import { fetchNextPayments } from 'reducers/nextPayments';

import Home from 'pages/home';
import Orders from 'pages/orders';
import Settings from 'pages/settings';
import Scanner from 'pages/scanner';
import Support from 'pages/support';
import SideDrawer from 'components/SideDrawer';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const StackNavigator = () => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="Home" component={Home} />
    <Drawer.Screen name="Orders" component={Orders} />
    <Drawer.Screen name="Settings" component={Settings} />
    <Drawer.Screen name="Scanner" component={Scanner} />
    <Drawer.Screen name="Support" component={Support} />
  </Stack.Navigator>
);

const RootNavigator = props => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchNextPayments());
    dispatch(fetchPaymentMethods());
  }, []);

  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Home"
        screenOptions={{ gestureEnabled: true }}
        drawerContent={props => <SideDrawer {...props} />}
      >
        <Drawer.Screen name="Root" component={StackNavigator} />
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Orders" component={Orders} />
        <Drawer.Screen name="Settings" component={Settings} />
        <Drawer.Screen name="Scanner" component={Scanner} />
        <Drawer.Screen name="Support" component={Support} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default RootNavigator;