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

感谢您的帮助！

Answer 1

您应该在网络上使用来自 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 中定义本机应用程序的导航器，它只能在移动设备上使用，因此它不必与页面/文件夹中的导航器相同。（实际上，如果您只想在浏览器中使用您的应用运行，则根本不需要它。

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;

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

有解决这个问题的包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;

Next.js 如何使用 React Navigation Drawer？

How to use React Navigation Drawer with Next.js?

reactjs

react-native

next.js

react-navigation

react-navigation-drawer