У меня есть проблема, когда я пытаюсь добавить нижнюю навигацию в моем приложении на главном экране:
Это код основного экрана:
// Main.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import firebase from 'react-native-firebase';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
export default class Main extends React.Component {
state = { currentUser: null }
componentDidMount() {
const { currentUser } = firebase.auth()
this.setState({ currentUser })
}
render() {
const { currentUser } = this.state
return (
<View style={styles.container}>
<Text>
Hi {currentUser && currentUser.email}!
</Text>
</View>
)
}
}
const bottomTabNavigator = createBottomTabNavigator(
{
Main: Main,
},
{
initialRouteName: 'Main'
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
Нет, когда я запускаю его, я получить эту ошибку:
Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/en/hello-react-navigation.html for usage guide.
<unknown>
index.bundle?platform=ios&dev=true&minify=false:109707:24
<global>
Main.js:24
loadModuleImplementation
require.js:322:6
guardedLoadModule
require.js:201:45
runUpdatedModule
require.js:657:17
metroHotUpdateModule
require.js:533:8
define
require.js:53:24
global code
Main.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:4
<unknown>
[native code]:0
inject
injectUpdate.js:62:35
forEach
[native code]:0
injectUpdate
injectUpdate.js:71:26
on$argument_1
HMRClient.js:40:21
emit
index.js:202:37
_ws.onmessage
WebSocketHMRClient.js:72:20
EventTarget.prototype.dispatchEvent
event-target-shim.js:818:39
_eventEmitter.addListener$argument_1
WebSocket.js:232:27
emit
EventEmitter.js:190:12
callFunctionReturnFlushedQueue
[native code]:0
Итак, я проверил файл моего пакета:
{
"name": "kowop",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/bottom-tabs": "^5.0.3",
"@react-navigation/material-bottom-tabs": "^5.0.1",
"@react-navigation/native": "^5.0.1",
"email-validator": "^2.0.4",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "^1.5.6",
"react-native-paper": "^3.6.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.6.4",
"react-native-screens": "^2.0.0-beta.2",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.0.16",
"typescript": "^3.7.5"
},
"devDependencies": {
"@babel/core": "7.8.3",
"@babel/runtime": "7.8.3",
"@react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "^6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.4",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Но, по-видимому, реакция-навигация не может быть обновлена выше 4.11, или, по крайней мере, это то, что npm страница говорит.
244 663 Версия
4.1.1 Лицензия
Размер распакованного файла MIT
41 КБ Всего файлов
12 Проблемы
133 Pull Requests
3
Так что я немного растерялся здесь. Кто-нибудь видит, что я делаю не так?
Спасибо большое!
Тим