Question

我的应用中有一个按钮需要导航到另一个屏幕和同时更改redux中的值。当然，export default不能使用两次，但是当我将其中一个导出标记为常量时，代码将失败。在这种情况下，connect(null, mapDispatchToProps)失败。如何让两个出口工作？：

import React, { Component } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { person } from "../../assets/people";
import { withNavigation } from 'react-navigation';
import { connect } from 'react-redux';


export class ProfileCard extends Component {
    updateMarkerState = (x) => {
        this.props.updateMarkerState(x)
        this.props.navigation.navigate("map");
    }

    render() {
        return (
            <Card >
                <CardItem cardBody>
                    <Image source={this.props.data.values.photoId} style={{ height: 200, width: null, flex: 1 }} />
                </CardItem>
                <CardItem>
                    <Text>{this.props.data.values.altName}</Text>
                </CardItem>
                <CardItem>
                    <Text>{this.props.data.values.personIntroText}</Text>
                </CardItem>
                <CardItem style={styles.buttonContainer}>
                        <Button transparent
                            onPress={() =>
                                this.updateMarkerState(this.props.data.values.id)
                            }>
                            <Icon active name="pin" />
                        </Button>
                            <Button transparent
                                onPress={() => {
                                    this.props.navigation.navigate("YouTubeScreen", {id: this.props.data.values.id});
                                }}>
                            <Icon active name="play"/>
                        </Button>
                </CardItem>
            </Card>
        );
    }
}


const styles = StyleSheet.create({
    buttonContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    }
});

const mapDispatchToProps = (dispatch) => {
    return {
        updateMarkerState: (id) => {
        dispatch(updateMarkerState(id))
      }
    }
}

export const conn =  connect(null, mapDispatchToProps)(ProfileCard)

export default withNavigation(ProfileCard);

Answer 1

您可以连接HOC，例如

export default withNavigation(connect(null, mapDispatchToProps)(ProfileCard));

如何在使用react-nav和redux时克服单个默认导出问题

1 个答案: