React Native：如何在 Typescript 中结合组件道具和导航道具？

大佬教程收集整理的这篇文章主要介绍了React Native：如何在 Typescript 中结合组件道具和导航道具？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React Native：如何在 Typescript 中结合组件道具和导航道具？？

开发过程中遇到React Native：如何在 Typescript 中结合组件道具和导航道具？的问题如何解决？下面主要结合日常开发的经验，给出你关于React Native：如何在 Typescript 中结合组件道具和导航道具？的解决方法建议，希望对你解决React Native：如何在 Typescript 中结合组件道具和导航道具？有所启发或帮助；

我有一个显示在平面列表中的项目的屏幕。如果我在一个项目的文本/标题上“onLongPress”，我应该导航到一个填写了标题等的详细信息页面。如果我按下屏幕上所有项目的“+”按钮，它应该转到详细信息页面但是带有空字段（以便能够创建一个新字段）。我现在将展示一些代码。

这是我的屏幕呈现项目的一部分：

...

type RootStackParamList = {
    ListDetails: { Listname: String };
    Item: { Listname: String,itemInfo: any };
    ItemDetails: { Listname: String,itemInfo: any };
  };

type ListDetailsScreenRouteProp = RouteProp<RootStackParamList,'ListDetails'>;
type ListDetailsScreenNavigationProp = StackNavigationProp<RootStackParamList,'ListDetails'>;

type Props = {
    route: ListDetailsScreenRouteProp;
    navigation: ListDetailsScreenNavigationProp
  };

export default function DetailsScreen({ route,navigation }: Props) {
    const { Listname } = route.params;

...

const renderItem = (item: any) => (
      <ItemScreen Listname={ListnamE} itemInfo={item} />
    )

    return (
      <VIEw style={styles.container}>
          <Text style={styles.header}>{ListnamE}</Text>
          {data.length > 0 ? (
            <FlatList
                style={styles.flatList}
                data={data}
                renderItem={({ item }: any) => renderItem(item)}
            />
          ) : (
            <Text style={styles.noItems}>There are no items here yet!</Text>
          )}
          <@R_502_5987@ingActionbutton onPress={() => navigation.navigate('ItemDetails',{ Listname: Listname,itemInfo: null })} />
      </VIEw>  

它将显示一个标题/标题、平面列表，然后是 FAB，它将导航到“ItemDetails”但没有 itemInfo，因此字段可以为空。在这里，我必须将 2 个道具传递给“ItemScreen”。 FAB 导航操作有效，因为在“ItemDetails”中，我可以通过“route.params”访问数据。

不起作用的是“ItemScreen”中的以下内容：

... 

type RootStackParamList = {
    Item: { Listname: String,itemInfo: any };
  };

type ItemScreenNavigationProp = StackNavigationProp<RootStackParamList,'Item'>;

type Props = {
    navigation: ItemScreenNavigationProp,};

export default function ItemScreen({ Listname,itemInfo}: any,{ navigation }: Props) {

...

const onLongPress = () => {
        navigation.navigate('ItemDetails',{
            Listname: Listname,itemInfo: itemInfo,});
    }

...  

我认为我在“ItemScreen”中破坏的道具/参数有问题。由于我使用的是打字稿，因此我还必须将 '{ navigation }: Props' 添加到参数列表中，以及我想从上一个屏幕 'Listname' 和 'itemInfo' 发送的 2 个参数。

在这种情况下代码构建并没有显示错误，但是当尝试使用“onLongPress”时，它会说“导航未定义”。

我已经尝试将我的 2 个参数放在“道具”对象中，但是在我之前的屏幕中，他抱怨“”需要一个“导航”参数/道具。但是我不想传递那个，我想使用代码中的隐式，它在我所有其他屏幕上是如何正常完成的？

有谁知道如何正确使用 ItemScreen 参数和导航，以便导航不是未定义的，而不必在渲染“ItemScreen”组件时传递“导航”？它也不能是我认为的路由参数，因为它们不是通过路由传递的，而是在通过“”渲染组件时带有参数/道具

解决方法

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

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

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

大佬总结

以上是大佬教程为你收集整理的React Native：如何在 Typescript 中结合组件道具和导航道具？全部内容，希望文章能够帮你解决React Native：如何在 Typescript 中结合组件道具和导航道具？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。