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

Question

我正在使用react-native和redux。我也使用反应导航，我有一个底部选项卡导航器，其中第二个RouteConfig navigationOptions为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存储（我作为prop传递给提供者的同一个）是不好的做法。

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

store = createStore(rootReducer)     
export default store

Answer 1

在const BottomTab = createBottomTabNavigator()这个完整的代码箱mapStateToProps，mapDispatchToProps箭头功能。

    export default connect(mapStateToProps, mapDispatchToProps)(BottomTab);

我相信你想这样做。

Answer 2

在您希望调度redux操作的屏幕内（在您的情况下为SecondScreen），设置一个等于您要执行的函数的导航参数。您可以将参数命名为any，但我通常会根据其使用方式对其进行命名。

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}) => ({})
  }
)