React Native 平台如何运作？

Question

我有一个屏幕，我想使用 Platform 为 Android 和 iOS 使用两个不同的选择器。看起来不工作所以我只是用 <Text> 测试它但没有改变

  const PickerOS = () => {
    Platform.OS === 'android' ? (
      <Text>
        ANDROID
        {console.log('android')}
      </Text>
    ) : (
      <Text>
        IOS
        {console.log('ios')}
      </Text>
    );
  };

  useEffect(() => {
    PickerOS();
  }, []);

return (
    <View style={styles.container}>   
      {PickerOS()}
</View>

我错在哪里？谢谢！

Answer 1

您的代码运行良好。但是你什么都没return。

const PickerOS = () => {
  return Platform.OS === "android" ? (
    <Text>
      ANDROID
      {console.log("android")}
    </Text>
  ) : (
    <Text>
      IOS
      {console.log("ios")}
    </Text>
  );
};

或者你可以试试

const PickerOS = () =>
  Platform.OS === "android" ? (
    <Text>
      ANDROID
      {console.log("android")}
    </Text>
  ) : (
    <Text>
      IOS
      {console.log("ios")}
    </Text>
  );

希望对您有所帮助。有疑问欢迎留言。

Answer 2

当您的特定于平台的代码比较复杂时，您应该考虑将代码拆分到单独的文件中。 React Native 将检测文件何时具有 .ios。或.android。扩展并在其他组件需要时加载相关平台文件。

例如，假设您的项目中有以下文件：

BigButton.ios.js
BigButton.android.js

然后您可以按如下方式要求该组件：

import BigButton from './BigButton';

React Native 将根据运行平台自动选择正确的文件。

来源：https://reactnative.dev/docs/platform-specific-code

React Native 平台如何运作？

React Native Platform how works?

cross-platform

react-native