如何解决无法在React Native中使用可重复使用的卡片组件进行导航
我有这个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 举报,一经查实,本站将立刻删除。