时间戳

首页 > 解决方案 > 导入创建的 redux 存储以从非连接组件调度操作

react-native - 导入创建的 redux 存储以从非连接组件调度操作

问题描述

我正在使用 react-native 和 redux。我也在使用反应导航，我有一个底部选项卡导航器，其中第二个 RouteConfig 导航选项为 tabBarOnPress 提供了一个功能。我想在这个回调中向 redux 发送一些操作。

import store from "./Store"    

const BottomTab = createBottomTabNavigator(
    {
        First: FirstScreen,
        Second: {
           screen: SecondScreen,
           navigationOptions: {
               tabBarOnPress: ({ navigation }: any) => {
                   store.dispatch(someAction())
                   navigation.navigate("SecondScreenModal");
               }
           }
        },
        Third: ThirdScreen
    },
    {
        navigationOptions: ({ navigation }) => ({
        //..
    }
);

由于我找不到连接底部选项卡导航器的方法，我想知道在这种情况下直接导入创建的 redux 存储是否是不好的做法（与我作为道具传递给提供者的相同）。

import rootReducer from "./RootReducer";
import {createStore} from "redux";

store = createStore(rootReducer)     
export default store

标签： react-nativereduxreact-navigation

解决方案

在您希望调度 redux 操作的屏幕内（在您的情况下为 SecondScreen），设置导航参数等于您要执行的功能。您可以为参数命名任何名称，但我通常根据我将如何使用它来命名它。

componentDidMount = () => {
  this.props.navigation.setParams({ tabBarOnPress: this.props.myReduxActionCreator })
}

然后在您的屏幕导航选项中，您可以执行类似的操作来访问该功能。确保它与上面的参数名称相同，所以在这个例子中，'tabBarOnPress'

const BottomTab = createBottomTabNavigator(
  {
    First: FirstScreen,
    Second: {
      screen: SecondScreen,
      navigationOptions: {

        // Access the function inside navigation params here
        tabBarOnPress: ({navigation}) => navigation.getParam('tabBarOnPress', null)
      }
    },
    Third: ThirdScreen
  },
  {
    navigationOptions: ({navigation}) => ({})
  }
)

推荐阅读