使用多个道具对同一组件做出原生反应

Question

我正在将 ReactNative 与 Expo 一起使用，尝试构建可重复使用的组件，我将使用许多道具来更改标题、图像和描述。

ServiceCardDescription.js

  export default function ServiceCardDescription(props) {
    return (
        <TouchableOpacity
        style={[
          styles.Box,
          {
            flexDirection: i18n.locale == "ar"? 'row-reverse' : 'row',
          },
        ]}
        onPress={() => {
          Analytics.logEvent("select_serivce", {
            selected_service: "writing",
          });
          this.props.navigation.navigate("Gender", {
            search_type: 2,
            requestType: 1,
          });
        }}
      >
        <Image
          source={require("../../assets/images/writingIcon.png")}
          style={{
            width: "20%",
            height: 48,
          }}
        />
        <View>
        <Text
          style={{
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0,
            textAlign: i18n.locale == "ar" ? "right" : "left",
            color: "#8f92a1",
            fontFamily: "FrutigerLTArabicBold",
          }}
        >
          {i18n.t("home.writing")}
        </Text>
        <Text
          style={{
            fontSize: 10,
            lineHeight: 20,
            color: "#8f92a1",
            fontFamily: "FrutigerLTArabicBold",
          }}
        >
          {i18n.t("home.writingDescription")}
        </Text>
        </View>
      </TouchableOpacity>
    );
  }

我将所有这些值都存储在一个名称中，所以我可以使用一些特定的变量并将其作为道具发送给标题、图像和描述吗？

在onPress selected_service: "writing" , image标签有writingIcon, Text标签有writing和writingDescription

如何使用这些道具渲染组件 <ServiceCardDescription/>？

Answer 1

这可能有帮助

用法：

export default function App() {

  // create props here
  const data = {
    selected_service: "writing",
    image: require("../../assets/images/writingIcon.png"),
    desc: i18n.t("home.writingDescription"),
  };

  return (
    <View>
      <ServiceCardDescription data={data} />
    </View>
  );
}

ServiceCardDescription.js

export default function ServiceCardDescription(props) {
  // extract props here
  const { selected_service, image, desc } = props.data;

  return (
    ....
      onPress={() => {
        Analytics.logEvent("select_serivce", {
          selected_service: selected_service,
        });
        ....
      }}
    >
      <Image
        source={image}
        style={{
          width: "20%",
          height: 48,
        }}
      />
      <View>
        <Text
          ....
        >
          {i18n.t("home.writing")}
        </Text>
        <Text
          ....
        >
          {desc}
        </Text>
      </View>
    ....
  );
}

使用多个道具对同一组件做出原生反应

react native using multi props to same component

react-native