Question

我无法在JSX（大括号）中的javascript表达式中成功使用Platform.select（）。该应用仍可编译，但组件丢失。如果我直接调用select函数，它将起作用，如// Works所示。 是否会因为在JSX表达式中未传递Platform.OS'key'而发生这种情况？ Platform模块文档为rather limited?

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

// Does not work:
const PlatformText = () => {
  return (
    <View>
      {Platform.select({
        ios: () => <Text>IOS</Text>,
        android: () => <Text>Android</Text>,
      })}
    </View>
  );
};

// Works:
const PlatformText = Platform.select({
  ios: () => <Text>IOS</Text>,
  android: () => <Text>Android</Text>,
});

export default PlatformText;

Answer 1

之所以这样，是因为您要返回一个函数。没有人在调用该回调。如果您想将该组件与Platform.select一起使用，只需直接返回所需的组件：

const PlatformText = () => {
  return (
    <View>
      {Platform.select({
        ios: <Text>IOS</Text>,
        android: <Text>Android</Text>,
      })}
    </View>
  );
};

Answer 2

在“ 无效”部分中，您返回功能，而在“ 有效”部分中，您直接返回Platform-Select的结果。

因此请确保您以正确的方式调用PlatformText以获取结果。

在JSX JavaScript表达式中使用Platform.select时，缺少组件： return（<> {Platform.select（{}）} </>）;

2 个答案: