如何在 React-Native Expo 中设置参数类型

Question

({ title, subTitle, image }) 都是 3 默认为 any 类型，我应该能够将它们设置为 string 除非有更具体的类型可以将图像的类型设置为 URL？我只是使用来自 Expo 的 默认标签模板 。它确实使用 TypeScript. 我可能更愿意将它们设置为 inline，但也不反对尝试 interface。我认为这只是冒号字符串

: string

但我一定是在语法中遗漏了一些东西，因为到目前为止它还不是很喜欢。

import React, { FC } from 'react'
import { ImageBackground, StyleSheet, Text, View } from 'react-native'

import colors from '../constants/Colors'
import AppText from './AppText'

// interface AppCardProps {
//   title: string;
//   subTitle: string;
//   image: string;
// }


export default function AppCard({ title, subTitle, image }) {
  return (
    <View style={styles.card}>
      <ImageBackground
        style={styles.image}
        source={image} />
      <View style={styles.detailsContainer}>
        <AppText style={styles.title}>{title}</AppText>
        <AppText style={styles.subTitle}>{subTitle}</AppText>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 15,
    backgroundColor: colors.white,
    marginBottom: 20,
    overflow: "hidden",
    // width: 360,
    width: "90%",

  },
  detailsContainer: {
    padding: 20,
  },
  image: {
    // width: 360,
    // width: "100%",
    height: 200,
    // resizeMode: "cover",
    justifyContent: "center",
  },
  subTitle: {
    color: colors.secondary,
    fontWeight: "bold",
  },
  title: {
    marginBottom: 7,
  },
})

Answer 1

这不是 React Native 特有的，而是一般的 TypeScript。

interface AppCardProps {
  title: string;
  subTitle: string;
  image: string;
}

export default function AppCard({ title, subTitle, image }: AppCardProps) {
  // ...
}

或使用 React.FC 类型

import React from 'react';

interface AppCardProps {
  title: string;
  subTitle: string;
  image: string;
}

const AppCard: React.FC<AppCardProps> = ({ title, subTitle, image }) => {
  // ...
}

export default AppCard;

Answer 2

这是您可以想象的另一种方式。实际上，我更喜欢这种方式，您只需将 props 称为 props，而不是进入解构赋值语法，在其中剥离字段。我觉得让你的组件实际引用 props.title 和 props.subTitle 等有好处。当我必须重构 props 并且我不想将它们与其他变量或 useState 变量混淆时，它也有帮助具有相似的名称.. 让它们都被称为“props.title”让我知道我肯定会通过属性获得标题。

而且，作为一个附带好处，当您这样做时，很容易看到 props 变量具有您定义的属性形状。

interface AppCardProps {
  title: string;
  subTitle: string;
  image: string;
}

export default function AppCard(props: AppCardProps) {
  // ...
}

如何在 React-Native Expo 中设置参数类型

How do I set argument types in React-Native Expo

react-native

expo

react-typescript