Expo / React Native：根据平台创建自定义 <Switch /> 失败答案

【问题标题】：Expo / React Native : Failing at creating my customized <Switch /> depending on platformExpo / React Native：根据平台创建自定义 <Switch /> 失败
【发布时间】：2020-05-14 14:25:33
【问题描述】：

我在 Expo，我的问题是 iOS 和 Android 上的颜色属性不一样。我已经做到了（效果很好）：

    //...
    const [hasAcceptedPolicy, setHasAcceptedPolicy] = useState(false);
    //...
    return(
       <View style={{ flexDirection: "row" }}>
        {Platform.OS === "ios" ? (
          <Switch
            ios_backgroundColor={"red"} //just for example, I know it's ugly :p
            value={hasAcceptedPolicy}
            onValueChange={() => {
              hasAcceptedPolicy
                ? setHasAcceptedPolicy(false)
                : setHasAcceptedPolicy(true);
            }}
          />
        ) : (
          <Switch
            thumbColor={"blue"} //just for example, I know it's ugly :p
            value={hasAcceptedPolicy}
            onValueChange={() => {
              hasAcceptedPolicy
                ? setHasAcceptedPolicy(false)
                : setHasAcceptedPolicy(true);
            }}
          />
        )}
        <Text>I accept the policy.</Text>
      </View>
    )

我会在其他地方重复使用它，所以我想“为什么不制作我自己的组件，这样我就可以在任何我想要的地方调用 <mySwitch /> 了？”看起来像这样的东西：

import mySwitch from "./mySwitch";
    //...
    const [hasAcceptedPolicy, setHasAcceptedPolicy] = useState(false);
    //...
    return(
    <View style={{ flexDirection: "row" }}>
        <mySwitch
            color={"blue"} //just for example, I know it's ugly :p
            value={hasAcceptedPolicy}
            onValueChange={() => {
              hasAcceptedPolicy
                ? setHasAcceptedPolicy(false)
                : setHasAcceptedPolicy(true);
            }}
          />
        <Text>I accept the policy.</Text>
    </View>
   )

我的失败尝试导致：

//mySwitch.js
import React from "react";
import { Switch, Platform, View } from "react-native";

export default mySwitch = (color, value, onValueChange) => {
  return (
    <View style={{ flexDirection: "row" }}>
      {Platform.OS === "ios" ? (
        <Switch
          ios_backgroundColor={color}
          value={value}
          onValueChange={onValueChange}
        />
      ) : (
        <Switch
          thumbColor={color}
          value={value}
          onValueChange={onValueChange}
        />
      )}
      <Text>I accept the policy.</Text>
    </View>
  );
};

当我按下开关时，它永远不会打开，布尔值hasAcceptedPolicy 永远不会变成true。我究竟做错了什么？谢谢您的帮助。

【问题讨论】：

标签： reactjs react-native expo platform

【解决方案1】：

功能组件道具是一个对象。

尝试像这样解构你的组件道具：

export default mySwitch = (color, value, onValueChange)

到

export default mySwitch = ({ color, value, onValueChange })

【讨论】：

【解决方案2】：

解决方案：

import React from "react";
import { Switch, Platform, View, Text } from "react-native";

export default MySwitch = ({
  color,
  backgroundColor,
  title,
  value,
  onValueChange,
}) => {
  return (
    <View style={{ flexDirection: "row" }}>
      {Platform.OS === "ios" ? (
        <Switch
          trackColor={{ false: null, true: color }}
          value={value}
          onValueChange={onValueChange}
        />
      ) : (
        <Switch
          thumbColor={color}
          trackColor={{ false: null, true: backgroundColor }}
          value={value}
          onValueChange={onValueChange}
        />
      )}
      <Text>{title}</Text>
    </View>
  );
};

你想在哪里调用你的组件：

    //...
    const [hasAcceptedPolicy, setHasAcceptedPolicy] = useState(false);
    //...
    return(
      <MySwitch
        color={hasAcceptedPolicy ? "#4285f4" : null}
        backgroundColor={"#a1c2fa"}
        title="I accept the terms and conditions."
        value={hasAcceptedPolicy}
        onValueChange={() => {
          hasAcceptedPolicy
            ? setHasAcceptedPolicy(false)
            : setHasAcceptedPolicy(true);
        }}
      />
    );

【讨论】：