如何制作包裝器組件以設置 react-native-picker 中的選擇器項目樣式？

Question

我正在使用 react-native-community/picker v1.6.1，並且我正在嘗試制作一個預先設置樣式的選擇器項目以避免在每個項目上都有顏色屬性。 下面是一個展示 App.js。 紅色選擇器按預期工作，但黃色選擇器呈現黑色而不是黃色，我不明白為什么。 該代碼在 iOS 模擬器中進行了測試，該模擬器帶有一個新生成的 React Native 應用程序版本 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 />;
};

感覺就像我在這里遺漏了一些關於反應組件的基本知識，非常感謝您朝着正確的方向輕推。 馬庫斯

Answer 1

您可以使用選擇器的itemStyle 屬性來設置您的選擇器項目的樣式。