Question

我已经尽一切努力尝试整合react-navigation v2和redux，如文档和https://github.com/react-navigation/react-navigation/tree/master/examples/ReduxExample中示例应用程序的说明所述，但该应用程序仍然无法正常工作。

这是我的代码：

navReducer.js上的我的减速器：

import { combineReducers } from 'redux';
import { NavigationActions } from 'react-navigation';

import { RootNavigator } from '../Navigator/navigator';

// Start with two routes: The Main screen, with the Login screen on top.

function nav(state = 'initialNavState', action) {
  let nextState;
  switch (action.type) {
    default:
      nextState = RootNavigator.router.getStateForAction(action, state);
      break;
  }

  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
}

const AppReducer = combineReducers({
  nav,
});

export default AppReducer;

我的带有redux的导航器集成在navigtor.js中：

// import React from 'react';
// import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// import { createStackNavigator } from 'react-navigation';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';


import AnotherScreen from '../Screens/AnotherScreen';
import HomeScreen from '../Screens/HomeScreen';
import LoginScreen from '../Screens/LoginScreen';
import MainScreen from '../Screens/Main';

import Icon from 'react-native-vector-icons/Ionicons';

import { createBottomTabNavigator } from 'react-navigation';

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav
);

const RootNavigator = createBottomTabNavigator({
   Login: {
   	screen: LoginScreen,
   	navigationOptions: {
   		tabBarLabel: 'Login',
   		tabBarIcon: ({ tintColor })=>(
   			<Icon name='md-log-in' size={30}/>
   		)
   	}
   },
   Home: {
   	screen: HomeScreen,
   	navigationOptions: {
   		tabBarLabel: 'Home',
   		tabBarIcon: ({ tintColor })=>(
   			<Icon name='md-home' size={30}/>
   		)
   	}
   },
   Main: {
   	screen: MainScreen,
   	navigationOptions: {
   		tabBarLabel: 'Application',
   		tabBarIcon: ({ tintColor })=>(
   			<Icon name='md-android' size={30}/>
   		)
   	}
   },
   Another: {
   	screen: AnotherScreen,
   	navigationOptions: {
   		tabBarLabel: 'Another',
   		tabBarIcon: ({ tintColor })=>(
   			<Icon name='md-apps' size={30}/>
   		)
   	}
   }
},{
	initialRouteName: 'Login',
    tabBarOptions: {
  		activeTintColor: '#e91e63',
  		labelStyle: {
    		fontSize: 30,
  		},
  		style: {
   			backgroundColor: 'blue',
  		},
	}
})


const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');

const mapStateToProps = state => ({
  state: state.nav,
});

const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);
export { RootNavigator, AppNavigator, middleware };

和我的App.js：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import NavReducer from './app/Reducers/navReducer';
import { AppNavigator, middleware } from './app/Navigator/navigator';

const store = createStore(NavReducer, applyMiddleware(middleware));

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppNavigator />
      </Provider>
    );
  }
}

但是每次我重新加载它时都会出现日志错误：

C:\newApp\awesomePro…ptionsManager.js:65 ReferenceError: React is not defined

This error is located at:
    in TabBarIcon (at BottomTabBar.js:84)
    in RCTView (at View.js:71)
    in View (at BottomTabBar.js:19)
    in TouchableWithoutFeedback (at BottomTabBar.js:18)
    in TouchableWithoutFeedbackWrapper (at BottomTabBar.js:141)
    in RCTView (at View.js:71)
    in View (at createAnimatedComponent.js:147)
    in AnimatedComponent (at index.js:128)
    in SafeView (at withOrientation.js:50)
    in withOrientation (at BottomTabBar.js:128)
    in TabBarBottom (at withDimensions.js:32)
    in withDimensions(TabBarBottom) (at createBottomTabNavigator.js:60)
    in RCTView (at View.js:71)
    in View (at createBottomTabNavigator.js:76)
    in TabNavigationView (at createTabNavigator.js:127)
    in NavigationView (at createNavigator.js:57)
    in Navigator (at createNavigationContainer.js:368)
    in NavigationContainer (at reduxify-navigator.js:63)
    in NavigatorReduxWrapper (created by Connect(NavigatorReduxWrapper))
    in Connect(NavigatorReduxWrapper) (at App.js:134)
    in Provider (at App.js:133)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)

商店创建成功，我认为唯一的问题是AppNavigator，但我不知道要更改什么。

Answer 1

您在import React from 'react';上评论了navigtor.js，因此引发了React is not defined。

import React from 'react';
// import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// import { createStackNavigator } from 'react-navigation';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';


import AnotherScreen from '../Screens/AnotherScreen';
import HomeScreen from '../Screens/HomeScreen';
import LoginScreen from '../Screens/LoginScreen';
import MainScreen from '../Screens/Main';

import Icon from 'react-native-vector-icons/Ionicons';

import { createBottomTabNavigator } from 'react-navigation';

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav
);

const RootNavigator = createBottomTabNavigator({
   Login: {
    screen: LoginScreen,
    navigationOptions: {
        tabBarLabel: 'Login',
        tabBarIcon: ({ tintColor })=>(
            <Icon name='md-log-in' size={30}/>
        )
    }
   },
   Home: {
    screen: HomeScreen,
    navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor })=>(
            <Icon name='md-home' size={30}/>
        )
    }
   },
   Main: {
    screen: MainScreen,
    navigationOptions: {
        tabBarLabel: 'Application',
        tabBarIcon: ({ tintColor })=>(
            <Icon name='md-android' size={30}/>
        )
    }
   },
   Another: {
    screen: AnotherScreen,
    navigationOptions: {
        tabBarLabel: 'Another',
        tabBarIcon: ({ tintColor })=>(
            <Icon name='md-apps' size={30}/>
        )
    }
   }
},{
    initialRouteName: 'Login',
    tabBarOptions: {
        activeTintColor: '#e91e63',
        labelStyle: {
            fontSize: 30,
        },
        style: {
            backgroundColor: 'blue',
        },
    }
})


const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');

const mapStateToProps = state => ({
  state: state.nav,
});

const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);
export { RootNavigator, AppNavigator, middleware };

我无法将我的反应导航应用程序与Redux集成在一起

1 个答案: