Javascript 使用导航HOC对导航作出反应，导航HOC不在转盘中工作

我正在使用expo制作react本机应用程序我正在使用管理单元旋转木马库

我想当有人点击旋转木马时，导航到这里是代码

    import React, { Component } from 'react';
import { withNavigation } from 'react-navigation';

export default class SliderEntry extends Component {

    static propTypes = {
        data: PropTypes.object.isRequired,
        even: PropTypes.bool,
        parallax: PropTypes.bool,
        parallaxProps: PropTypes.object
    };

    get image () {
        const { data: { illustration }, parallax, parallaxProps, even } = this.props;

        return parallax ? (
            <ParallaxImage
              source={{ uri: illustration }}
              containerStyle={[styles.imageContainer, even ? styles.imageContainerEven : {}]}
              style={styles.image}
              parallaxFactor={0.35}
              showSpinner={true}
              spinnerColor={even ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.25)'}
              {...parallaxProps}
            />
        ) : (
            <Image
              source={{ uri: illustration }}
              style={styles.image}
            />
        );
    }

    render () {

        const { data: { title, subtitle}, even, navigation } = this.props;    

        const uppercaseTitle = title ? (
            <Text
              style={[styles.title, even ? styles.titleEven : {}]}
              numberOfLines={2}
            >
                { title.toUpperCase() }
            </Text>
        ) : false;

        return (
            <TouchableOpacity
              activeOpacity={1}
              style={styles.slideInnerContainer}
              onPress={() => navigation.push('ProfileScreen', {category: title })}  
              >
                <View style={styles.shadow} />
                <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                    { this.image }
                    <View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
                </View>
                <View style={[styles.textContainer, even ? styles.textContainerEven : {}]}>
                    { uppercaseTitle }
                    <Text
                      style={[styles.subtitle, even ? styles.subtitleEven : {}]}
                      numberOfLines={2}
                    >
                        { subtitle }
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }
}

import React，{Component}来自'React'；
从“react navigation”导入{withNavigation}；
导出默认类SliderEntry扩展组件{
静态类型={
数据：PropTypes.object.isRequired，
偶数：PropTypes.bool，
视差：PropTypes.bool，
视差投影：PropTypes.object
};
获取图像（）{
const{data:{插图}，视差，视差，偶数}=this.props；
返回视差(
) : (
);
}
渲染（）{
const{data:{title，subtitle}，偶数，navigation}=this.props；
常量大写标题=标题(
{title.toUpperCase（）}
)：假；
返回(
navigation.push（'ProfileScreen'，{category:title}）}
>
{this.image}
{大写标题}
{副标题}
);
}
}

i get undefined不是对象（评估“navigation.push”）

以下是Github上项目的链接：

---

您实际上并没有使用withNavigation，您只是在导入它。您需要将组件类传递到withNavigation中

withNavigation的工作方式是，传入组件，然后withNavigation将导航对象作为道具添加到组件中

您没有这样做，因此未定义this.props.navigation

请参见下面修改的代码，导出默认表达式已移动到底部，并通过导航（Slidentry）传递

阅读手册

import React，{Component}来自'React'；
从“react navigation”导入{withNavigation}；
类SliderEntry扩展组件{
静态类型={
数据：PropTypes.object.isRequired，
偶数：PropTypes.bool，
视差：PropTypes.bool，
视差投影：PropTypes.object
};
获取图像（）{
const{data:{插图}，视差，视差，偶数}=this.props；
返回视差(
) : (
);
}
渲染（）{
const{data:{title，subtitle}，偶数，navigation}=this.props；
常量大写标题=标题(
{title.toUpperCase（）}
)：假；
返回(
navigation.push（'ProfileScreen'，{category:title}）}
>
{this.image}
{大写标题}
{副标题}
);
}
}
//请参见正在使用withNavigation包装的组件。
使用导航导出默认值（SliderEntry）；

您实际上并没有使用withNavigation，您只是在导入它。您需要将组件类传递到withNavigation中

withNavigation的工作方式是，传入组件，然后withNavigation将导航对象作为道具添加到组件中

您没有这样做，因此未定义this.props.navigation

请参见下面修改的代码，导出默认表达式已移动到底部，并通过导航（Slidentry）传递

阅读手册

import React，{Component}来自'React'；
从“react navigation”导入{withNavigation}；
类SliderEntry扩展组件{
静态类型={
数据：PropTypes.object.isRequired，
偶数：PropTypes.bool，
视差：PropTypes.bool，
视差投影：PropTypes.object
};
获取图像（）{
const{data:{插图}，视差，视差，偶数}=this.props；
返回视差(
) : (
);
}
渲染（）{
const{data:{title，subtitle}，偶数，navigation}=this.props；
常量大写标题=标题(
{title.toUpperCase（）}
)：假；
返回(
navigation.push（'ProfileScreen'，{category:title}）}
>
{this.image}
{大写标题}
{副标题}
);
}
}
//请参见正在使用withNavigation包装的组件。
使用导航导出默认值（SliderEntry）；

Thank Man工作正常。令人敬畏的人工作得很好。真棒

import React, { Component } from 'react';
import { withNavigation } from 'react-navigation';

class SliderEntry extends Component {

    static propTypes = {
        data: PropTypes.object.isRequired,
        even: PropTypes.bool,
        parallax: PropTypes.bool,
        parallaxProps: PropTypes.object
    };

    get image () {
        const { data: { illustration }, parallax, parallaxProps, even } = this.props;

        return parallax ? (
            <ParallaxImage
              source={{ uri: illustration }}
              containerStyle={[styles.imageContainer, even ? styles.imageContainerEven : {}]}
              style={styles.image}
              parallaxFactor={0.35}
              showSpinner={true}
              spinnerColor={even ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.25)'}
              {...parallaxProps}
            />
        ) : (
            <Image
              source={{ uri: illustration }}
              style={styles.image}
            />
        );
    }

    render () {

        const { data: { title, subtitle}, even, navigation } = this.props;    

        const uppercaseTitle = title ? (
            <Text
              style={[styles.title, even ? styles.titleEven : {}]}
              numberOfLines={2}
            >
                { title.toUpperCase() }
            </Text>
        ) : false;

        return (
            <TouchableOpacity
              activeOpacity={1}
              style={styles.slideInnerContainer}
              onPress={() => navigation.push('ProfileScreen', {category: title })}  
              >
                <View style={styles.shadow} />
                <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                    { this.image }
                    <View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
                </View>
                <View style={[styles.textContainer, even ? styles.textContainerEven : {}]}>
                    { uppercaseTitle }
                    <Text
                      style={[styles.subtitle, even ? styles.subtitleEven : {}]}
                      numberOfLines={2}
                    >
                        { subtitle }
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }
}

// See the component is being wrapped with withNavigation.
export default withNavigation(SliderEntry);