[英]How to navigate one component to other component in react native component tree?
I have implement 2 component and the following is the component tree.我已经实现了 2 个组件,以下是组件树。
Mypurchase <--- ProductCard (parent) (child) Mypurchase <--- ProductCard (parent) (child)
I need to navigate from productCard component button, to another screen, called 'complainytSubmission'我需要从 productCard 组件按钮导航到另一个名为“complainytSubmission”的屏幕
But it says navigation.navigate is not a function and, undefined is not a function how I solve it?但它说 navigation.navigate 不是 function 并且 undefined 不是 function 我该如何解决?
'Mypurchase' component: “我的购买”组件:
i一世
mport * as React from 'react';
import {Dimensions, StyleSheet, View, FlatList, ScrollView, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {Card, Button, Text} from 'react-native-paper';
import {useEffect, useState} from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import ProductCard from './ProductCard';
import LinearGradient from "react-native-linear-gradient";
import {hostName} from '../../constants/constants';
const MypurchaseSceen = ({navigation}) => {
const [productDetails , setproductDetails] = useState([]);
console.log('productDetails Array',productDetails);
useEffect(() => {
getProductDetails();
}, []);
const getProductDetails = async () => {
const token = await AsyncStorage.getItem('userToken');
console.log('token from storage', token);
fetch(hostName +"/customer/get-all-products", {
method: "post",
headers: {
'Content-Type': 'application/json',
'Authentication': `Bearer ${token}`
},
})
.then((response) => response.json())
.then((json) => setproductDetails(json))
.catch((error) => console.error(error))
};
return (
<View>
<FlatList data={productDetails.data}
keyExtractor={( item ,index) => 'key' + index}
renderItem={({item}) => {
return (
<ProductCard item = {item}/>
)
}} />
</View>
);
};
export default MypurchaseSceen;
Productcard component:产品卡片组件:
import * as React from 'react';
import {Dimensions, StyleSheet, TouchableOpacity, View} from 'react-native';
import { Text} from 'react-native-paper';
import LinearGradient from "react-native-linear-gradient";
import ProductButton from './ProductButton';
const ProductCard = ({item} )=> {
return (
<View>
<View style={ styles.cardView}>
<Text style={styles.productName}> Product Name :{item.productName}</Text>
<Text style={styles.category}> Category :{item.category} </Text>
<ProductButton />
</View>
</View>
);
};
export default ProductCard;
Inside your ProductButton, try to use the navigation hook在您的 ProductButton 中,尝试使用导航钩子
export function ProductButton(){
const navigation = useNavigation();
return(
<Button onClick={() => navigation.navigate('complainytSubmission')}
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.