Question

应用程序具有我要升级到最新版本的所有旧代码。它使用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;
    ...

请提出建议。谢谢。

Answer 1

您可以浏览导航容器ref

您可以在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',
  },
});

reducder.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;

Answer 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>
  );
}

从1.x到5的反应导航，如何迁移redux动作

2 个答案: