在 React Native 中为个人 Picker.Item 设置样式答案

【问题标题】：Style individual Picker.Item in React Native在 React Native 中为个人 Picker.Item 设置样式
【发布时间】：2018-04-20 21:17:26
【问题描述】：

有什么方法可以设置单个 Picker.Items 的样式吗？除了文字颜色？

另外，有点相关的是，Picker.Item 会采用什么道具？我知道他们会使用“key”、“value”、“label”和“color”。但是还有其他人吗？

我正在尝试以不同于该 Picker 中其他 Picker.Items 的方式设置我的 Picker 组件中的 Picker.Item 之一。

具体来说，我正在尝试修改 fontWeight，但除了具有该颜色属性的文本颜色之外，我无法更改任何样式。

我知道您可以使用 itemStyle 作为 Picker 组件的道具来设置所有项目的样式，但是如果您希望其中一个看起来与其他项目有点不同怎么办？有没有办法做到这一点？

<Picker
  style={{height: 130, width: 130}}
  selectedValue={this.state.day}
  itemStyle={{height: 130, fontFamily: 'Rubik-Regular'}}
  onValueChange={(itemValue, itemIndex) => this.setState({day: itemValue})}
>
  <Picker.Item label="Day" value={-1} color='red'/>
  { validDays.map((i) => ( <Picker.Item key={i} label={i.toString()} value={i} /> )) }
</Picker>

试图改变第一个 Picker.Item (label="Day") 的样子。我尝试弄乱样式道具但没有成功：

<Picker.Item label="Day" value={-1} style={{ color: 'red'}}/>

还尝试过给标签一个 Text 组件，如下所示：

<Picker.Item label={(<Text>Hello</Text>)} value={-1}/>

那根本不会渲染。抛出一个错误。

也试过了：

<Picker.Item label="" value={-1} color='red'><Text>Hello</Text></Picker.Item>

【问题讨论】：

标签： javascript reactjs react-native picker

【解决方案1】：

在Picker.ios.js 和PickerAndroid.android.js 中提到了您可以用于Picker.Item 的唯一道具

static propTypes = {
    value: PropTypes.any, // string or integer basically
    label: PropTypes.string,
    color: PropTypes.string,
  };

因此，您不能为其提供任何其他值。

【讨论】：