使用typescript反应导航getparam
我正在开发一个应用程序，在该应用程序中，我从FlatList导航到自定义组件，并且需要访问我传递给该组件的数据。FlatList组件目前看起来如下所示：
import React from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import Order from '../../components/Order/Order';
import {
NavigationParams,
NavigationScreenProp,
NavigationState,
} from 'react-navigation';
export interface IProps {
navigation: NavigationScreenProp<NavigationState, NavigationParams>;
}
const OrdersOverview : React.FC<IProps> = props => {
const { navigation } = props;
return(
<View>
<FlatList
keyExtractor={(item) => item.order_id}
data={orders}
renderItem={({ item }) => (
<TouchableOpacity onPress= {() => {
navigation.navigate('OrderDetails', item);
}}>
<Order
orderNumber={item.order_id}
orderDate={item.orderDate}
dueDate={item.dueDate}
invoiceAmount={item.invoiceAmount}
status={item.state}
customer={item.customer}
/>
</TouchableOpacity>
)}
/>
</View>
);
}我正在尝试将我单击的项目传递到详细信息屏幕。然而，我不能访问这些项目，我不知道为什么它不能工作。我正在尝试访问下面这样的项目：
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import {
NavigationParams,
NavigationScreenProp,
NavigationState,
} from 'react-navigation';
export interface IProps {
navigation: NavigationScreenProp<NavigationState, NavigationParams>;
}
const OrderDetails : React.FC<IProps> = (props) => {
const { navigation } = props;
const [categoryName, setCategoryName] = useState('information');
return(
<View>
<Text>{ navigation.getParam('orderDate') }</Text>
</View>
);
}回答 1
Stack Overflow用户
发布于 2021-02-26 05:10:37
键入参数
在新版本的React Navigation中可以获得完整的typescript支持。现在使用props.route.params而不是props.navigation.getParam()。
您希望传递一个特定于您的应用程序及其参数要求的类型，而不是在NavigationScreenProp上使用通用类型NavigationState作为泛型。
我确信你已经有了一个Order对象的类型，但我需要一个类型来使用：
interface OrderItem {
order_id: number;
orderDate: string;
dueDate: string;
invoiceAmount: number;
state: string;
customer: number;
}现在我们说OrderDetails屏幕必须始终接收这些道具。
type RootStackParamList = {
OrdersList: undefined;
OrderDetails: OrderItem;
}警告
请注意，不建议像您这样传递整个order对象。您只需传递order_id并通过某种全局状态访问订单本身。文档中有一个关于它的long section，这只是其中的一部分：
了解参数中应该包含什么类型的数据是很重要的。参数就像屏幕的选项。它们应该只包含配置在屏幕上显示的内容的信息。避免传递将在屏幕上显示的完整数据(例如，传递用户id而不是用户对象)。也要避免传递被多个屏幕使用的数据，这样的数据应该放在全局存储中。例如，假设您有一个个人资料屏幕。当导航到它时，您可能会想在参数中传递user对象。这看起来很方便，并且允许您使用route.params.user访问用户对象，而无需任何额外的工作。然而，这是一种反模式。诸如用户对象之类的数据应该位于您的全局存储中，而不是导航状态中。否则，您将在多个位置复制相同的数据。这可能会导致错误，如配置文件屏幕显示过时的数据，即使用户对象在导航后发生了更改。
访问Params
但是我想回答你的typescript问题，所以我假设你可以从参数访问orderDate，尽管你不应该这样做。
您可以从堆栈或选项卡导航器导入堆栈屏幕道具的类型，其中将包括route和navigation。我们将泛型设置为参数映射RootStackParamList和当前路由名称'OrderDetails'。
import { StackScreenProps } from "@react-navigation/stack";
type OrderDetailsProps = StackScreenProps<RootStackParamList, 'OrderDetails'>或者，您可以仅使用RouteProp类型定义route属性，该类型采用相同的泛型。
import { RouteProp } from "@react-navigation/native";
type OrderDetailsProps = {
route: RouteProp<RootStackParamList, 'OrderDetails'>;
}无论采用哪种方式，我们都会获得对route.params属性的完整Typescript支持。
const OrderDetails : React.FC<OrderDetailsProps> = ({route}) => {
return(
<View>
<Text>Order Placed on { route.params.orderDate }</Text>
</View>
);
}https://stackoverflow.com/questions/63181292
复制相似问题
腾讯云开发者
