React Native平台如何工作？

Question

我有一个屏幕，我想在Android和iOS使用两个不同的选择器。Platform.看起来好像没有用，所以我在测试，只是用一个 <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

你的代码工作正常。但你没有返回任何东西。

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.devdocsplatform-specific-code