如何从静态导航选项调用 redux 操作？答案

【问题标题】：How to call redux action from static navigationOptions?如何从静态导航选项调用 redux 操作？
【发布时间】：2018-06-05 23:38:51
【问题描述】：

我需要从静态 navigationOptions 调用一个动作，但无法通过 this.props 访问我的动作。如何调用这个动作？我在控制台中收到错误“无法读取未定义的属性‘注销’”。

static navigationOptions = ({navigation}) =>( {
        title: 'Home',
        header: <Header headerTitle={navigation.state.routeName} logoutButtonPress={() => {
        this.props.logout(); // this action is not working 
                NavigationActions.reset({
                    index: 0,
                    actions: [NavigationActions.navigate({ routeName: "Welcome" })]
                })
                navigation.navigate('Welcome');
            }
            }
        />,
      });

【问题讨论】：

标签： react-native

【解决方案1】：

在有导航选项的屏幕组件中

  componentDidMount() {
    this.props.navigation.setParams({
      logOut: this.actionLogOut
    });
  }

actionLogOut = () => {
this.props.dispatch(logOut()); };

在componentDidMount时在导航参数中加载注销功能动作，然后

static navigationOptions = ({ navigation }) => {
return {
  headerTitle: (
    <Text
      style={{
        left: Platform.OS == "android" ? 20 : 0
      }}
    >
      Personal Data
    </Text>
  ),
  headerRight: (
    <Aux>
      <Icon
        name="md-notifications"
        size={27}
        color="#9D9B9C"
        style={{ paddingLeft: 15, marginRight: 15 }}
      />
      <Icon
        name="ios-log-out"
        size={27}
        color="red"
        style={{ paddingLeft: 15, marginRight: 15 }}
        onPress={() => {
          console.log(navigation);
          navigation.state.params.logOut();
          navigation.dispatch(NavigationActions.back({ index: "Login" }));
          navigation.popToTop();
        }}
      />
    </Aux>
  )
};

};

在 navigationOptions 中用作 navigation.state.params.logOut();

此组件必须使用“react-redux”中的 import { connect } 连接并与组件连接

【讨论】：

很好，这对我很有帮助。我做了一个稍微不同的方法，不得不改用navigation.getParam('logOut')，但这是一个很好的例子。

【解决方案2】：

您需要将logout 按钮设为component，并从react-redux 模块mapDispatchToProps 显式绑定props

例如

   const LogoutButton = ({logout}) => {
     return (
      <TouchableOpacity  style={{height: 50, width: 100}} onPress={() => logout()}>
        <Text>Logout</Text>
      </TouchableOpacity>
     )
}

const mapDispatchToProps = dispatch => ({
  logout: () => /*dispatch your logout action here*/
})

并在你的 static navigationOptions 中使用它

static navigationOptions = ({navigation}) =>( {
        title: 'Home',
        header: <Header headerTitle={navigation.state.routeName}
        /><Logout/>,
      });

或修改您的组件以支持此组件。

【讨论】：

收到错误“未定义”。无法识别组件 logoutButton 中的参数“logout”
您的parent component 是否像这样连接到redux 商店 - export default connect(null, mapDispatchToProps)(YourComponentName)
如果父级表示使用 navigationOptions 的当前屏幕，那么是的，它已连接