react-navigation 从 1.x 到 5，如何迁移 redux 动作答案

【问题标题】：react-navigation from 1.x to 5, how to migrate redux actionsreact-navigation 从 1.x 到 5，如何迁移 redux 动作
【发布时间】：2020-10-14 15:10:57
【问题描述】：

应用程序包含我正在升级到最新版本的所有旧代码。它使用 Redux 和 StackNavigator 进行状态管理。由于不支持，我无法理解如何迁移现有的 redux 操作，这些操作正在更改各种事件的屏幕。示例操作：

export const goToHome = () => ({
  type: PUSH,
  routeName: 'projectList',
});

哪个更早到达 navReducer，它处理屏幕的 POPing 和 PUSHing。

export default (state = initialState, action) => {
  let nextState;
  switch (action.type) {
    case NAV_POP:
      nextState = AppNavigator.router.getStateForAction(
        NavigationActions.goBack(),
        state
      );
      break;
    ...

请提出建议。谢谢。

【问题讨论】：

标签： javascript react-native react-navigation-v5

【解决方案1】：

您可以浏览导航容器参考

你可以在reducer中调用navigation().navigate("Settings")或navigation().goBack()

这里是导出导航的演示：https://snack.expo.io/@nomi9995/2eb7fd

App.js

import React,{useEffect} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const navRef = React.createRef();

export const navigation=()=>{
  return navRef.current && navRef.current
}

const TestComponent=()=> {
  useEffect(()=>{
    setTimeout(() => {
      navigation().navigate("Settings")
      setTimeout(() => {
        navigation().goBack()
      }, 3000);
    }, 100);
  })
  return (
    <View style={styles.container}>
      <Text>TestComponent 1</Text>
    </View>
  );
}


const TestComponent2=()=> {
  return (
    <View style={styles.container}>
      <Text>TestComponent 2</Text>
    </View>
  );
}


const RootStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer ref={navRef}>
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={TestComponent} />
        <RootStack.Screen name="Settings" component={TestComponent2} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

reducer.js

import { navigation } from 'path of App.js';

export default (state = initialState, action) => {
  let nextState;
  switch (action.type) {
    case NAV_POP:
      nextState = navigation().goBack()
      break;

【讨论】：

试过了。获取“Hooks 只能在函数组件的主体内部调用”
@thevikas 你检查了吗？
在尝试了很多东西之后感到很累。最后放弃了，重构了整个代码库，开始使用useNavigation hook。添加了 nav 作为混合 redux 操作的参数（除了 nav PUSH 之外，它还进行了 redux 调用）。当只调用 navBack 的 navPop 时，完全停止使用 redux 操作。 Jest + Detox 即将让一切再次稳定下来。原来的导航减速器被杀死了。

【解决方案2】：

navigationRef 用于这样的场景。

您可以参考documentation here

说明

有时您需要从以下位置触发导航操作您无权访问导航道具，例如 Redux 中间件。对于这种情况，您可以从导航容器

这正是您的要求，我们在这里创建一个 navigationref 并使用从那里调用导航方法。

下面是一个简单示例的代码，您可以在减速器中使用“导航”。此外，您必须将其移动到单独的文件中，就像他们在文档中提供的那样。

import * as React from 'react';
import { View, Button, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const navigationRef = React.createRef();

function navigate(name, params) {
  navigationRef.current && navigationRef.current.navigate(name, params);
}

function Home() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigate('Settings', { userName: 'Lucy' })}
      />
    </View>
  );
}

function Settings({ route }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Hello {route.params.userName}</Text>
      <Button title="Go to Home" onPress={() => navigate('Home')} />
    </View>
  );
}

const RootStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={Home} />
        <RootStack.Screen name="Settings" component={Settings} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

【讨论】：