如何在react-native-picker中创建包装器组件来设置选取器项目的样式？

Question

我正在使用react-native-community/picker v1.6.1，并且我正在尝试创建一个预定义样式的picker项，以避免在每个项上都有color属性。下面是一个showcase App.js。红色拾取器按预期工作，但黄色拾取器呈现为黑色而不是黄色，我不明白为什么。代码是在iOS仿真器中使用新生成的React Native app版本0.62.2进行测试的，我已经在其中安装了选取器组件。

import React, {useState} from 'react';
import {SafeAreaView} from 'react-native';
import {Picker} from '@react-native-community/picker';

const YellowPickerItem = props => {
  return <Picker.Item {...props} color={'yellow'} />;
};

const App = () => {
  const [redValue, setRedValue] = useState(2);
  const [yellowValue, setYellowValue] = useState(3);

  return (
    <>
      <SafeAreaView style={{flex: 1}} backgroundColor={'gray'}>
        <Picker selectedValue={redValue} onValueChange={setRedValue}>
          <Picker.Item label={'Red 1'} value={1} key={1} color={'red'} />
          <Picker.Item label={'Red 2'} value={2} key={2} color={'red'} />
          <Picker.Item label={'Red 3'} value={3} key={3} color={'red'} />
          <Picker.Item label={'Red 4'} value={4} key={4} color={'red'} />
        </Picker>
        <Picker selectedValue={yellowValue} onValueChange={setYellowValue}>
          <YellowPickerItem label={'Yellow 1'} value={1} key={1} />
          <YellowPickerItem label={'Yellow 2'} value={2} key={2} />
          <YellowPickerItem label={'Yellow 3'} value={3} key={3} />
          <YellowPickerItem label={'Yellow 4'} value={4} key={4} />
        </Picker>
      </SafeAreaView>
    </>
  );
};

export default App;

最奇怪的是，如果我将YellowPickerItem组件更改为：

const YellowPickerItem = props => {
  return <SafeAreaView />;
};

我觉得我在这里遗漏了一些关于react组件的基本信息，所以非常感谢大家在正确的方向上推动我的努力。马库斯

Answer 1

您可以使用选取器的itemStyle属性来设置选取器项目的样式。