Question

我正在使用 React Native Stack Navigation 在我的应用中配置标题，然后在其中嵌套一个 Drawer Navigation。

在安卓模拟器中，一切正常。但是每当我尝试使用 expo 打开应用程序时，就只有一个白色的空白屏幕。开发者工具没有记录任何错误，Expo 本身也没有给我一个错误，终端也没有。

我尝试用一个 <Text> 组件替换整个导航，在这种情况下，Expo 显示了文本。但我似乎无法找到我做错了什么。非常感谢您的帮助，因为我只是在学习 React Native。

这是我的代码：

index.tsx

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

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

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;

React-Native 嵌套导航在博览会中不起作用

1 个答案: