web-dev-qa-db-ja.com

個々のPicker.ItemをReactネイティブでスタイル設定

個々のPicker.Itemsをスタイリングする方法はありますか？テキストの色以外？

また、多少関連していますが、Picker.Itemはどのような小道具を取りますか？私は彼らが「キー」、「値」、「ラベル」そして「色」を取ることを知っています。しかし、他に何かありますか？

Pickerコンポーネント内のPicker.Itemの1つを、そのPicker内の他のPicker.Itemとは異なる方法でスタイル設定しようとしています。

具体的には、fontWeightを変更しようとしていますが、そのcolorプロパティを持つテキストの色を除いて、どのスタイルも変更できませんでした。

ItemStyleをPickerコンポーネントの小道具として使用して、すべてのアイテムのスタイルを設定できることは知っていますが、そのうちの1つを他のアイテムと少し異なって見せたい場合はどうでしょうか。それを行う方法はありますか？

<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'}}/>

また、ラベルに次のようなテキストコンポーネントを指定してみました。

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

それはまったくレンダリングされません。エラーをスローしました。

また試した：

<Picker.Item label="" value={-1} color='red'><Text>Hello</Text></Picker.Item>
javascriptreactjsreact-nativepicker
5
Trevor Storey

Picker.Itemに使用できる唯一の小道具は、ここで Picker.ios.js および-に記載されています。 PickerAndroid.Android.js

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

したがって、他の値を指定することはできません。

1
Pritish Vaidya