尝试向导航

Question

我使用react native off canvas menu和redux。

我现在需要以编程方式进行导航，我不认为在画布菜单允许的情况下做出反应，所以我需要引入我能找到的最简单的导航系统添加到我的应用程序中。

我试图添加react native redux router并且我收到错误：

  Connect（Router）中的mapStateToProps（）必须返回一个普通对象。   取而代之的是未定义。

代码：

这是我的基本组件。它只用于包含<Menu/>，但我在其中添加了Router：

Vepo.js

import React, { Component } from 'react'
import { fetchCategories } from './categories/categories.action'
import { getCurrentPosition } from './location/location.action'
import Menu from './menu/Menu'
import { View } from 'react-native'

import AddPage from './add-page/AddPage'
import SearchPage from './search-page/SearchPage'



var { Router, Route } = require('react-native-redux-router')

class Vepo extends Component {
  componentDidMount() {
    const { store } = this.context
    this.unsubscribe = store.subscribe(() => { })
    store.dispatch(getCurrentPosition())
    store.dispatch(fetchCategories())
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  render() {
    console.log('vepo')
    return (
      <View>
        <Menu />
        <Router>
          <Route name="add" component={AddPage} />
          <Route name="search" component={SearchPage} />
        </Router>
      </View>
    )
  }
}
Vepo.contextTypes = {
  store: React.PropTypes.object
}

export default Vepo

并在此处创建：

index.js

//@flow
import { createStore, applyMiddleware } from 'redux'
import { combineReducers } from 'redux-immutable'
import { Provider } from 'react-redux'
import Vepo from './components/Vepo'
import keyword from './components/search-page/keywords.reducer'
import categories from './components/categories/categories.reducer'
import { location } from './components/location/location.reducer'
import distanceFromPlaceValue from
  './components/distanceSlider/distanceSlider.reducer'
import searchPage from './components/search-page/searchPage.reducer'
import {
  fetchProductsEpic,
  fetchProductsFulfilledEpic
} from './components/search-page/searchPage.epic'
import addPage from './components/add-page/addPage.reducer'
import productDetails from './components/add-page/addForm.reducer'
import alertModal from './components/alert-modal/alertModal.reducer'
import map from './components/map/map.reducer'
import menu from './components/menu/menu.reducer'
import initialState from './config/config'
import { composeWithDevTools } from 'remote-redux-devtools'
import React from 'react'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import fetchCategoriesEpic from './components/categories/categories.epic'
import {
  getCurrentLocationEpic,
  getCurrentPositionEpic,
  getAutocompleteResultsEpic,
  getPlaceDetailsEpic
} from './components/location/location.epic'
import {
  getShopAutocompleteResultsEpic,
  getShopPlaceDetailsEpic
} from './components/shop/shop.epic'
import {
  uploadImageEpic,
  uploadProductEpic,
  uploadImageFulfilledEpic,
  uploadImageRejectedEpic,
  uploadProductFulfilledEpic,
  uploadProductRejectedEpic
} from './components/add-page/addForm.epic'
import { shop } from './components/shop/shop.reducer'
import searchResults from './components/search-results/searchResults.reducer'
import searchResultsPresenter from './components/search-results/searchResultsPresenter.reducer'

const rootReducer = combineReducers(
  {
    searchForm: combineReducers(
      {
        keyword,
        categories,
        location,
        distanceFromPlaceValue
      }),
    searchPage,
    addPage,
    addForm: combineReducers({
      productDetails,
      shop
    }),
    map,
    searchResults,
    searchResultsPresenter,
    menu,
    alertModal,
  }
)

export const rootEpic = combineEpics(
  fetchCategoriesEpic,
  uploadImageEpic,
  uploadProductEpic,
  uploadImageFulfilledEpic,
  uploadImageRejectedEpic,
  getCurrentLocationEpic,
  fetchProductsFulfilledEpic,
  getCurrentPositionEpic,
  getShopAutocompleteResultsEpic,
  getShopPlaceDetailsEpic,
  getAutocompleteResultsEpic,
  fetchProductsEpic,
  getPlaceDetailsEpic,
  uploadProductFulfilledEpic,
  uploadProductRejectedEpic
)

export const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(
    applyMiddleware(createEpicMiddleware(rootEpic))
  )
)

export const App = () => (
  <Provider store={store}>
    <Vepo />
  </Provider>
)

这是我想以编程方式导航的组件（搜索Actions.add()）：

Menu.js

import React from 'react'
import { View } from 'react-native'
import Icon from 'react-native-vector-icons/EvilIcons'
import { connect } from 'react-redux'
import { closePageMenu, openPageMenu } from './menu.action'
import { OffCanvasReveal } from 'react-native-off-canvas-menu'
import AddPage from '../add-page/AddPage'
import SearchPage from '../search-page/SearchPage'
import AlertModal  from '../alert-modal/AlertModal'
import {
  updateAlertModalIsOpen
} from '../alert-modal/alertModal.action'
var { Actions } = require('react-native-redux-router')

const mapStateToProps = (state) => ({
  isOpen: state.get('menu').get('isOpen')
})

const mapDispatchToProps = (dispatch) => ({
  updateAlertModalIsOpen: (isOpen) => {
    dispatch(updateAlertModalIsOpen(isOpen))
  },
  closePageMenu: () => {
    console.log("you must have closed the menu")
    dispatch(closePageMenu())
  },
  openPageMenu: () => {
    console.log("you must have opened the menu")
    dispatch(openPageMenu())
  }
})

let Menu = (props) => {
  console.log('menu')
  return(
  <View style={{ flex: 1 }}>

    <AlertModal yesClicked={() => {
      Actions.add()
      console.log("yes clicked")
      props.updateAlertModalIsOpen(false)
    }} />
    <OffCanvasReveal
      active={props.isOpen}
      onMenuPress={props.closePageMenu}
      backgroundColor={'#222222'}
      menuTextStyles={{ 
        color: '#FFFFFF', backgroundColor: 'transparent'
      }}
      handleBackPress={true}
      menuItems={[
        {
          title: 'Search Products',
          icon: <Icon 
            name="search" 
            size={35} 
            color={'#FFFFFF'} />,
          renderScene: <SearchPage />
        },
        {
          title: 'Add Products',
          icon: <Icon 
            name="plus" 
            size={35}
            color={'#FFFFFF'} />,
          renderScene: <AddPage rerenderKey={false} />
        }
      ]} />
  </View>
)}
Menu.propTypes = {
  closePageMenu: React.PropTypes.func.isRequired,
  isOpen: React.PropTypes.bool.isRequired,
  updateAlertModalIsOpen: React.PropTypes.func
}

Menu = connect(
  mapStateToProps,
  mapDispatchToProps
)(Menu)

export default Menu

为什么我收到错误？有没有一种更简单的导航方法，因为我使用了反应原生的画布菜单？

修改。刚刚添加了routerReducer：

var { routerReducer } = require('react-native-redux-router')

const rootReducer = combineReducers(
  {
    searchForm: combineReducers(
      {
        keyword,
        categories,
        location,
        distanceFromPlaceValue
      }),
    searchPage,
    addPage,
    addForm: combineReducers({
      productDetails,
      shop
    }),
    map,
    searchResults,
    searchResultsPresenter,
    menu,
    alertModal,
    routerReducer
  }
)

获得错误相同的错误

编辑：I'm now trying to use react-navigation：

index.js

//@flow
import { createStore, applyMiddleware } from 'redux'
import { combineReducers } from 'redux-immutable'
import { Provider, connect } from 'react-redux'
import Vepo from './components/Vepo'
import keyword from './components/search-page/keywords.reducer'
import categories from './components/categories/categories.reducer'
import { location } from './components/location/location.reducer'
import distanceFromPlaceValue from
  './components/distanceSlider/distanceSlider.reducer'
import searchPage from './components/search-page/searchPage.reducer'
import {
  fetchProductsEpic,
  fetchProductsFulfilledEpic
} from './components/search-page/searchPage.epic'
import addPage from './components/add-page/addPage.reducer'
import productDetails from './components/add-page/addForm.reducer'
import alertModal from './components/alert-modal/alertModal.reducer'
import map from './components/map/map.reducer'
import menu from './components/menu/menu.reducer'
import initialState from './config/config'
import { composeWithDevTools } from 'remote-redux-devtools'
import React, { Component } from 'react'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import fetchCategoriesEpic from './components/categories/categories.epic'
import {
  getCurrentLocationEpic,
  getCurrentPositionEpic,
  getAutocompleteResultsEpic,
  getPlaceDetailsEpic
} from './components/location/location.epic'
import {
  getShopAutocompleteResultsEpic,
  getShopPlaceDetailsEpic
} from './components/shop/shop.epic'
import {
  uploadImageEpic,
  uploadProductEpic,
  uploadImageFulfilledEpic,
  uploadImageRejectedEpic,
  uploadProductFulfilledEpic,
  uploadProductRejectedEpic
} from './components/add-page/addForm.epic'
import { shop } from './components/shop/shop.reducer'
import searchResults from './components/search-results/searchResults.reducer'
import searchResultsPresenter from './components/search-results/searchResultsPresenter.reducer'
import { StackNavigator, addNavigationHelpers } from 'react-navigation'

import AddPage from './components/add-page/AddPage'
import SearchPage from './components/search-page/SearchPage'

const AppNavigator = StackNavigator({
    Add: { screen: AddPage },
    Search: { screen: SearchPage }
})

const navReducer = (state, action) => {
    const newState = AppNavigator.router.getStateForAction(action, state)
    return newState || state
}

class AppWithNavigationState extends Component {
    render() {
        return (
            <AppNavigator
                navigation={addNavigationHelpers({
                    dispatch: this.props.dispatch,
                    state: this.props.nav
                })}
            />
        )
    }
}

let AppWithNavigationStateComponent = connect(state => ({
    nav: state.nav
}))(AppWithNavigationState)

export const App = () => {
    return (
        <Provider store={store}>
            <AppWithNavigationStateComponent />
        </Provider>
    )
}

const rootReducer = combineReducers(
  {
    searchForm: combineReducers(
      {
        keyword,
        categories,
        location,
        distanceFromPlaceValue
      }),
    searchPage,
    addPage,
    addForm: combineReducers({
      productDetails,
      shop
    }),
    map,
    searchResults,
    searchResultsPresenter,
    menu,
    alertModal,
    navReducer
  }
)

export const rootEpic = combineEpics(
  fetchCategoriesEpic,
  uploadImageEpic,
  uploadProductEpic,
  uploadImageFulfilledEpic,
  uploadImageRejectedEpic,
  getCurrentLocationEpic,
  fetchProductsFulfilledEpic,
  getCurrentPositionEpic,
  getShopAutocompleteResultsEpic,
  getShopPlaceDetailsEpic,
  getAutocompleteResultsEpic,
  fetchProductsEpic,
  getPlaceDetailsEpic,
  uploadProductFulfilledEpic,
  uploadProductRejectedEpic
)

export const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(
    applyMiddleware(createEpicMiddleware(rootEpic))
  )
)

获取错误：

  

undefined不是对象（评估   this.props.navigation.state.index