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存储是否是错误的做法（我作为道具传递给提供程序的同一个存储））。

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），将导航参数设置为等于要执行的功能。您可以为参数指定任何名称，但是我通常会根据其使用方式对其进行命名。

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

导入创建的redux存储以从未连接的组件中分派操作

2 个答案: