Как использовать React Navigation Drawer с Next.js?

Я бы хотел использовать React Navigation v5 (Drawer navigation) с Next.js, но у меня есть вопрос об их интеграции.

Вкратце: React Navigation (навигация по ящикам) на основе компонента React Navigation Screens. Условно отображает правильный экран.

Проблема в том, что в Next.js есть собственная система маршрутизации, основанная на структуре папок. например. каждый файл в папке / pages автоматически генерирует соответствующий маршрут, поэтому я не могу добавить эти файлы в качестве экрана навигации React (по крайней мере, я не уверен, что это вообще возможно)

Как заставить эти инструменты работать вместе и сохранить функцию SSR Next.js?

Пример панели навигации 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>
  );
}

Спасибо за любую помощь!


react-native reactjs next.js react-navigation react-navigation-drawer
person Velidan    schedule 23.07.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны использовать файловую систему маршрутизации от 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-response-navigation, подробности смотрите в документации! Убедитесь, что вы используете правильную версию этого пакета, если вы используете React Navigation 5, вам следует установить [email protected] прямо сейчас.

А вот пример, он должен работать на обеих платформах,

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;
person wispamulet    schedule 22.08.2020
comment
Спасибо за подробный ответ - person Velidan; 08.10.2020