0

我有这个 HomeScreen 文件，在其中添加了卡片组件（仪表板和亮点），我使用 TitleCard 自定义了卡片组件以重用样式，

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

当我不使用卡片并将整个代码放在主屏幕上并单击主屏幕上的查看全部按钮时，它会导航到该页面，但是当我使用卡片并使用其道具导航到提供的链接时然后forwardLink道具

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

此外，当我在 TitleCard 中添加this.props.navigation.navigate('{ props.forwardLink }')

我收到此错误消息： TypeError: undefined is not an object (evalating '_this.props.navigation')

这是每个文件的代码

名片

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;

亮点卡

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,
    fontWeight: '800',
    color: '#fff',
  },
});

当我直接在 HomeScreen 中使用 HighlightCard 代码时，它会导航到该页面，下面是如果我直接在主屏幕中使用它的代码

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

我认为我做错了什么是使用道具或引用导航页面

我还尝试为导航创建一个 const

常量 {navigate} = this.props.navigation

这也没有用

4

0 回答 0