React Navigation，Redux，如何更改屏幕？答案

【问题标题】：React Navigation, Redux, How to change screens?React Navigation，Redux，如何更改屏幕？
【发布时间】：2018-03-10 18:27:55
【问题描述】：

使用最新的 React Navigation v1.5.0，我的路线不会触发屏幕更改。

我已将 Redux 集成到我的设置中，详见 react-navigation-redux docs。我在这里看到的最大变化是“addListener”设置，尽管我不确定这是阻止屏幕变化的原因。我的路线使用 v.1.0 运行良好。

我在调试器中看到导航操作被触发并且屏幕被添加到导航状态，但屏幕没有改变。

单击下面的按钮会调度操作，但屏幕不会更改为“关于”屏幕并停留在主屏幕上。

RootNav

StackNavigator
  - Home
  - About

Index.js

const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.navigationState,
)

const addListener = createReduxBoundAddListener("root");

class App extends Component {
  render () {
    return (
      <View>
        <RootNav navigation={addNavigationHelpers({
         dispatch: this.props.dispatch,
         state: this.props.navigationState,
         addListener,
         })} />
     </View>
    )
  }
}

按钮

<TouchableHighlight onPress={ () => 
   this.props.dispatch(NavigationActions.navigate({
     routeName: 'About'
   })) }>
  <Text>About</Text>
</TouchableHighlight>

点击按钮后的状态：

nav: {
  key: StackRouterRoot,
  index: 1,
  isTransitioning: true,
  routes: [
   0: {routeName: 'Home'},
   1: {routeName: 'About'},
  ],
}

您如何正确调度路线/屏幕更改？

【问题讨论】：

标签： react-native redux react-redux react-navigation

【解决方案1】：

考虑到您使用的是redux-navigation，您的navigation state 并未绑定到redux。您需要创建一个Navigation reducer 并将其绑定到store。

例如

// Nav.js
// This is your exported router, which gets the initial State
import AppNavigator from '../Navigation/AppNavigation'
const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('LaunchScreen'))

export default reducer = (state = initialState, action) => {
  const newState = AppNavigator.router.getStateForAction(action, state)
  return newState || state
}

并像这样将其绑定到您的商店

// Store.js
    const RootReducer = combineReducers(config, {
  nav: Nav,
  // ...other reducers
});

最后在 Redux Navigation 状态下使用它

function ReduxNavigation (props) {
  const addListener = createReduxBoundAddListener('root')
  const { dispatch, nav } = props
  const navigation = ReactNavigation.addNavigationHelpers({
    dispatch,
    state: nav, // this is bound to redux store using mapStateToProps
    addListener
  })

  return <AppNavigation navigation={navigation} />
}

const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

如 docs

中所述

【讨论】：