reactjs - 如何在 Next.js 中使用 React Navigation Drawer？

Question

我想将 React Navigation v5（抽屉导航）与 Next.js 一起使用，但我对它们的集成有疑问。

简而言之：基于 React Navigation Screens 组件的 React Navigation（抽屉式导航）。它有条件地呈现正确的屏幕。

问题是： Next.js 有自己的基于文件夹结构的路由系统。例如。/pages 文件夹中的每个文件都会自动生成适当的路线，因此我无法将这些文件添加为 React 导航屏幕（至少我不确定它是否可能）

如何让这些工具协同工作并保存 Next.js SSR 功能？

React 导航抽屉的示例：

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

谢谢你的帮助！

标签： reactjsreact-nativereact-navigationnext.jsreact-navigation-drawer

Answer 1

您应该在 web 上使用来自 Nextjs 的基于文件的路由系统，并使用 React Navigation 在移动设备上进行自己的导航。

下面是我的做法，

// this is how your directory might look like

- pages/
  - index.tsx // this is your entry point for web
  - about.tsx
App.tsx // this is your entry point for native

// pages/index.tsx
import React from 'react';
import { Text, View } from 'react-native';

const Home: React.FC = () => (
  <View>
    <Text>Welcome to Expo + Next.js </Text>
  </View>
);

export default Home;

// pages/about.tsx
import React from 'react';
import { Text, View } from 'react-native';

const About: React.FC = () => (
  <View>
    <Text>This is about page!</Text>
  </View>
);

export default About;

在 中定义本地应用程序的导航器App.tsx，它只能在移动设备上运行，因此它不必与 pages/ 文件夹中的相同。（实际上，如果您只希望您的应用程序在浏览器中运行，则根本不需要它。

当您在浏览器中运行 Nextjs 应用程序时，Nextjs 将处理所有路由事项、SSR 等......就像普通的 Nextjs 应用程序一样。

// App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Home from '../pages/index';
import About from '../pages/about';

const Drawer = createDrawerNavigator();

const App: React.FC = () => (
  <NavigationContainer>
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="About" component={About} />
    </Drawer.Navigator>
  </NavigationContainer>
);

export default App;

重要的是，当您在本机应用程序上导航但在 Web 上使用自动路由系统时，您应该如何更改路线？

有一个包可以解决这个expo-next-react-navigation，查看文档了解详细信息！确保您使用的是该软件包的正确版本，如果您使用的是 React Navigation 5，则此时应安装 expo-next-react-navigation@1.1.6。

这是一个例子，它应该适用于两个平台，

import React from 'react';
import { FlatList, Text } from 'react-native';
import { Link } from 'expo-next-react-navigation';

const links = [
  { key: 'home', route: '' },
  { key: 'about', route: 'about' },
];

const Links: React.FC = () => (
  <FlatList
    data={links}
    renderItem={({ item }) => (
      <Link routeName={item.route}>
        {item.key}
      </Link>
    )}
  />
);

export default Links;