无法在React Native中使用可重复使用的卡片组件进行导航

编程问答 2022-06-09

问题描述

我有这个HomeScreen文件，在其中添加了Card组件（仪表板和突出显示），我使用TitleCard自定义了Card组件以重复使用样式，

每张卡中都有“查看全部”按钮，可导航到其各个屏幕，

当我不使用Cards并将整个代码放在主屏幕中，然后单击主屏幕上的View All按钮时，它将导航到该页面，但是当我使用Cards并使用其道具导航到该页面时然后将链接作为 forwardLink 道具提供

我收到此错误 “ ReferenceError：找不到变量：导航”

另外，当我在TitleCard中添加 this.props.navigation.navigate（'{props.forwardLink}'）

我收到此错误消息： TypeError：未定义不是对象（正在评估'_this.props.navigation'）

这是每个文件的代码

TitleCards 

import React from 'react';
import {StyleSheet,Text,View,TouchableOpacity} from 'react-native';

const TitleCards = props => {
  
  
  return (<View style={styles.textTitlesContainer}>
    <Text style={styles.textTitle}>{props.leftTitle}</Text>
    <TouchableOpacity 
          onPress={() => navigation.navigate('{props.forwardLink}')}>
          <Text style={[styles.textTitle,{color: '#F483A7'}]}>
            {props.rightTitle}
          </Text>
        </TouchableOpacity>
    </View>)
};

const styles = StyleSheet.create({
  textTitlesContainer: {
    flex: 1,width: '100%',flexDirection: 'row',justifyContent: 'space-between',padding: 5,},textTitle: {
    fontSize: 20,fontWeight: '800',color: '#fff',});

export default TitleCards;

主屏幕 

import React,{Component} from 'react';
import {
  SafeAreaView,ScrollView,StyleSheet,} from 'react-native';

import {CustomHeader} from '../index';
import Colors from '../constants/Colors';


import DashboardCard from './DashboardCard';
import HighlightCard from './HighlightCard';

export class HomeScreen extends Component {
  render() {
    return (

      <SafeAreaView style={{flex: 0,backgroundColor: Colors.primary}}>
        <CustomHeader 
          title="Home"
          isHome={true}
          navigation={this.props.navigation}
          />
        <ScrollView style={styles.container}>
          <DashboardCard />
          <HighlightCard />
        </ScrollView>

    
      </SafeAreaView>
          
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height:900,backgroundColor: Colors.mainBackground,paddingTop:6,});

export default HomeScreen;

HighlightCard 

import React,{Component} from 'react';
import {Text,View} from 'react-native';
import {CustomHeader} from '../../index';


const HighlightCard = (prop) => {
  return (
    <Card>
      <TitleCards leftTitle="Highlights" rightTitle="View More" forwardLink="Highlights">
        
      </TitleCards>
      <View>
        <Text>News Feed</Text>
      </View>
    </Card>
  );
};

export default HighlightCard;

const styles = StyleSheet.create({
  textTitle: {
    fontSize: 20,});

当我直接在HomeScreen中使用HighlightCard代码时，它将导航到该页面，下面是该代码，如果我直接在Home Screen中直接使用它，则可以使用

*{/* <Text style={styles.textTitle}>Highlights</Text>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('Highlights')}>
              <Text style={[styles.textTitle,{color: '#F483A7'}]}>View All</Text>
            </TouchableOpacity> */}*

我认为我在使用道具或引用导航页时出错了

我还尝试创建一个用于导航的const

const {navigate} = this.props.navigation

这也不起作用

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cardcomponentscomponentsreact-nativereact-props