Я собираюсь разработать навигацию по ящикам в моем проекте.
Я установил это с помощью этой команды:
npm install @react-navigation/drawer
Затем импортировать это в App.js
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
Это мой package.json
контент:
"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/drawer": "^5.0.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-screens": "^2.0.0-beta.1",
"react-native-view-shot": "^3.0.2",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.1.0",
Это мой App.js
контент:
const App = () => {
const Drawer = createDrawerNavigator();
return (
<View style={styles.container}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="login">
<Drawer.Screen name="login" component={Login} />
<Drawer.Screen name="second" component={SecondPage} />
</Drawer.Navigator>
</NavigationContainer>
</View>
)
};
Я должен сказать, что я уже создал Login
и SecondPage
компоненты и объявил их в файле с именемroot.js
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Login, Header, SecondPage, Footer, ThirdPage } from './components/index';
const AppNavigator = createStackNavigator({
login: { screen: Login },
header: { screen: Header },
second: { screen: SecondPage },
footer: { screen: Footer },
third: { screen: ThirdPage }
}, {
initialRouteName: 'login',
headerMode: 'none',
mode: 'modal',
}, {});
export default createAppContainer(AppNavigator);
Но я получаю ошибку (следующий экран).
Как я могу это исправить?
index.js
export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';
Ответы:
Я не понимаю, что вы пытаетесь сделать сейчас. Я думаю, что вы хотите добавить ящик навигатора.
Ваша проблема в том, что вы должны использовать один контейнер, но у вас есть два, а createStackNavigator имеет два параметра, но у вас есть три.
Я думаю, что ваша структура навигатора должна быть следующей.
Drawers.js
App.js
index.js
ИЛИ
источник
Вы комбинируете React Navigation 4 и React Navigation 5 в своем проекте. Это не действительно.
Реагировать навигации 4 упаковки:
react-navigation
,react-navigation-stack
, иreact-navigation-drawer
т.д.Реагировать навигации 5 пакетов:
@react-navigation/native
,@react-navigation/stack
, и@react-navigation/drawer
т.д.Следуйте официальным документам и используйте правильную версию и синтаксис пакетов https://reactnavigation.org/docs/en/getting-started.html.
В основном удалите свой код
root.js
и создайте навигатор стека, как здесь https://reactnavigation.org/docs/en/stack-navigator.htmlисточник
попробуйте установить: пряжа добавить реакцию-навигация-стек
и зависимости: пряжа добавляет реагирующий-родной-жест-обработчик реагирующий-родной-реанимированный реагирующий-нативный-экран
в ваших маршрутах: импортируйте {createStackNavigator} из 'response-navigation-stack';
источник
Содержание Index.js
источник