使用 props 调用 redux 操作，来自 stack-navigator-options [英] Calling a redux action using props, from stack-navigator-options

问题描述

我想在堆栈导航器选项中从 redux 调用一个操作.这是我的代码.当我使用 this.props.action_name 使用动作时，它说这不是一个函数.我在这里做错了什么?我使用了 navigation.params 来实现这一点，但它仍然不起作用.

I want to call an action from redux inside the stack navigator options. This is my code. When I use the action using this.props.action_name, it says this is not a function. What am I doing wrong here? I used the navigation.params to achieve this, but still it doesn't work.

componentDidMount() {
    this.props.navigation.setParams({
      referencedSharePost: this.sharePost,
      referencedDoShare: this.props.doShare
    });
  }

  sharePost = () => {
    this.props.doShare();
    console.log("DONE");
  };

  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <WritePost profile={this.state.loggedUserProfile} />

          <View style={styles.sharePostWrapper}>
            <PostProfileBar profile={this.state.postedUserProfile} />

            <Image
              source={{
                uri: "https://pbs.twimg.com/media/DWvRLbBVoAA4CCM.jpg"
              }}
              resizeMode={"stretch"}
              style={styles.image}
            />
          </View>
        </ScrollView>
      </View>
    );
  }

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    return {
      headerTitle: "Share To Feed",
      headerTitleStyle: {
        paddingLeft: "20%",
        paddingRight: "20%"
      },
      headerStyle: {
        paddingRight: 10,
        paddingLeft: 10
      },
      headerLeft: (
        <Icon
          name={"close"}
          size={30}
          onPress={() => {
            navigation.goBack();
          }}
        />
      ),
      headerRight: (
        <ButtonWithoutBackground
          buttonText={styles.buttonText}
          onPress={() => params.referencedSharePost()}
        >
          Post
        </ButtonWithoutBackground>
      )
    };
  };

这就是我将状态映射到道具的方式.

This is how I map my state to props.

import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import SharePostScreen from "./SharePostScreen";
import { doShare } from "../../config/actions";

const mapStateToProps = state => {
  return {
    sharedPost: state.mainFeed.updatedPost
  };
};

const mapDispatchToProps = dispatch => {
  return {
    doShare: bindActionCreators(doShare, dispatch)
  };
};

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

我想在 stackNavigationOptions 的 onPress() 中使用 this.props.doShare.

I want to use this.props.doShare inside onPress() of stackNavigationOptions.

推荐答案

默认导出后不需要单独connect SharePostScreen，因为它有在组件执行期间，没有获得 redux 状态的实例.

You don't need to separately connect SharePostScreen after exporting it as a default, since it has got no instance to the redux states, during the time component's execution happens.

因此，您可以将第二个代码段中的代码移动到 SharePostScreen 并在那里使用它，以访问 props.

Therefore you can move your code in the second snippet, to the SharePostScreen and use it there, to have an access to the props.

const mapStateToProps = state => {
  return {
    sharedPost: state.mainFeed.updatedPost
  };
};

const mapDispatchToProps = dispatch => {
  return {
    doShare: bindActionCreators(doShare, dispatch)
  };
};

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

这篇关于使用 props 调用 redux 操作，来自 stack-navigator-options的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！