我在将React Native的所有库从旧版本升级到最新版本时遇到了问题。
如果您能理解并为我提供可能的解决方案,请帮助我解决错误。
谢谢。
反应导航,redux,redux-saga
Package.json
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"android-bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/",
"android-release-build": "npm run android-bundle && cd android && ./gradlew assembleRelease && cd ..",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/MyApp/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
},
"dependencies": {
"2": "^2.0.0",
"lodash.debounce": "^4.0.8",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-native": "0.59.9",
"react-native-af-video-player": "^0.2.1",
"react-native-gesture-handler": "^1.3.0",
"react-native-htmlview": "^0.14.0",
"react-native-image-progress": "^1.1.1",
"react-native-keyboard-manager": "^4.0.13-12",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-modal": "^11.0.1",
"react-native-pdf": "^5.1.0",
"react-native-permissions": "^1.1.1",
"react-native-progress": "^3.6.0",
"react-native-splash-screen": "^3.2.0",
"react-native-storage": "^1.0.1",
"react-native-tab-view": "^2.5.0",
"react-native-version-number": "^0.3.6",
"react-native-webview": "^5.11.0",
"react-navigation": "^3.11.0",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-saga": "^0.16.0",
"rn-fetch-blob": "^0.10.15"
},
"devDependencies": {
"@babel/core": "7.4.5",
"@babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./app/assets/fonts/"
]
}
}
Index.js
import { AppRegistry, SafeAreaView,StyleSheet } from 'react-native';
import App from './app/App';
import React from 'react';
import { Provider } from 'react-redux'
import configureStore from './app/redux'
import {fetchCinemaList} from './app/redux/actions'
const store = configureStore()
store.dispatch(fetchCinemaList());
const DemoApp = () => (
<Provider store={store}>
<App/>
</Provider>
)
const styles = StyleSheet.create({
safeArea: {
flex: 1,
flexGrow: 1,
backgroundColor: 'white',
shadowColor: 'transparent',
},
});
export default store
AppRegistry.registerComponent('MyApp', () => DemoApp);
App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import {DeviceEventEmitter, Platform, AppState, } from 'react-native';
import React, {Component,} from 'react';
import {connect} from 'react-redux'
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer
} from 'react-navigation';
import SplashScreen from 'react-native-splash-screen';
import {Tabs} from './config/tabBarConfig'
import {SideMenu} from './components'
import { fetchCards, fetchReservations, navigationChanged } from './redux/actions';
import store from '../index'
import {PromoSplash} from './screens/splash'
import {testUser} from './assets'
import KeyboardManager from 'react-native-keyboard-manager'
import { load,} from './services/utils';
if (Platform.OS == 'ios') KeyboardManager.setEnable(true);
function getCurrentRouteName(navigationState) {
if (!navigationState) {
return null;
}
const route = navigationState.routes[navigationState.index];
if (route.routes) {
return getCurrentRouteName(route);
}
return route.routeName;
}
const Nav = createDrawerNavigator({
Tabs
},
{
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
contentComponent: props => <SideMenu {...props}/>
});
export const MainNav = createStackNavigator({
Splash: {
name: "PromoSplash",
screen: PromoSplash
},
MainNavigator: {
name: "Nav",
screen: Nav
}
}, {
headerMode: 'none',
initialRouteName: "Splash",
})
class App extends Component {
constructor (props) {
super(props)
this.state = {
cineId: '',
appState: AppState.currentState,
}
}
async retrouveInfoCine() {
const infoCine = await load('selectedCinema', "");
this.setState({cineId: infoCine.id, });
}
componentWillMount() {
fetchReservations(testUser);
}
render() {
return (
<MainNav
onNavigationStateChange={(prevState, currentState) => {
const currentScreen = getCurrentRouteName(currentState);
const prevScreen = getCurrentRouteName(prevState);
console.log("prevScreen, currentScreen", prevScreen, currentScreen)
store.dispatch(navigationChanged(prevScreen, currentScreen))
if (prevScreen !== currentScreen) {
if (currentScreen == "Mes Réservations" || currentScreen == "MyCard") {
let state = store.getState()
if (currentScreen == "Mes Réservations" ) { //&& !state.reservations.reservations_fetched) {
console.log("Mes Reservations")
store.dispatch(fetchReservations(state.userInfo.token))
} else {
store.dispatch(fetchCards(state.userInfo.token))
}
DeviceEventEmitter.emit('ModalVisible', { visible: true })
}
if (prevScreen == "Mes Réservations" || prevScreen == "MyCard") {
DeviceEventEmitter.emit('ModalVisible', { visible: false })
}
if (currentScreen == "Programme") {
SplashScreen.hide();
DeviceEventEmitter.emit('refreshData', {})
}
if (currentScreen == "Mon Cinéma") {
DeviceEventEmitter.emit('refreshDatesList', {})
}
}
}}
/>
)
}
}
const appFinal = createAppContainer(App);
export default connect()(appFinal)
我收到TypeError:尽管我已根据最新的导航代码要求更改了代码,但undefined不是对象(正在评估“ Component.router.getStateForAction”)错误。
Old Versions:
"react-navigation": "^1.5.11",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-saga": "^0.16.0",