Expo / React Native：无法根据平台创建我的自定义 <Switch />

Question

我在 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>
    )

我会在其他地方重复使用它，所以我想 "Why not make my own component so I can call <mySwitch /> wherever I want ?" 看起来像这样的东西：

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。我究竟做错了什么？谢谢您的帮助。

Answer 1

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

尝试像这样解构你的组件 props :

export default mySwitch = (color, value, onValueChange)

至

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

Answer 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);
        }}
      />
    );

Expo / React Native：无法根据平台创建我的自定义 <Switch />

Expo / React Native : Failing at creating my customized <Switch /> depending on platform

platform

reactjs

react-native

expo