使用props调用redux动作,来自stack-navigator-options

时间:2018-04-25 14:05:00

标签: react-native

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

Match 0 holds: name@domain.com alt@yahoo.net
Group 0 holding: name@domain.com alt@yahoo.net
Capture 0 holds name@domain.com alt@yahoo.net
Group 1 holding:  alt@yahoo.net
Capture 0 holds name@domain.com
Capture 1 holds  alt@yahoo.net
Group 2 holding: yahoo.
Capture 0 holds domain.
Capture 1 holds yahoo.
Group 3 holding: o
Capture 0 holds d
Capture 1 holds o
Capture 2 holds m
Capture 3 holds a
Capture 4 holds i
Capture 5 holds n
Capture 6 holds y
Capture 7 holds a
Capture 8 holds h
Capture 9 holds o
Capture 10 holds o
Group 4 holding: t
Capture 0 holds c
Capture 1 holds o
Capture 2 holds m
Capture 3 holds n
Capture 4 holds e
Capture 5 holds t
Press any key to continue . . .

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

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>
      )
    };
  };

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

1 个答案:

答案 0 :(得分:2)

默认导出后,您不需要单独connect SharePostScreen,因为在组件执行期间它没有到redux状态的实例。

因此,您可以将第二个代码段中的代码移至SharePostScreen并在其中使用,以便访问props

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

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

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