如何在 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

您应该在 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 将处理所有路由的事情，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;