Question

我正在开发一个React Native项目。

我使用react-native-custom-picker，但是当我尝试提供Custom Picker样式时，它不起作用。我的代码如下

//.. in CustomPicker.js
<CustomPicker
    placeholder={labelDefault}
    options={options} 
    getLabel={item => item.label}
    optionTemplate={this.renderOption}
    selectedValue={this.props.selectedValue}
    onValueChange={this.onValueChangeCustomPicker}
    textStyle={{color:colors.dark_black,fontSize:25}}--> Here is not work
/>

renderOption()的功能

renderOption(settings) {
    const { item, getLabel } = settings
    return (
      <View style={styles.optionContainer}>
        <View style={styles.innerContainer}>
          <Text style={{ color: colors.dark_black, alignSelf: 'flex-start', fontSize: 24 }} key={item.key}>{item.label}</Text>
        </View>
      </View>
    )
  }

我知道Picker样式仅支持IOS。

我怎么了？任何想法！

Answer 1

您可以尝试使用此代码吗？

我不知道您如何组织"options,"，但是您无法工作，因为您没有任何地方考虑"colors."的因素

renderOptions：

const options = [ 
...
color: "black",
]
...
renderOption(settings) {
    const { item, getLabel } = settings
    return (
      <View style={styles.optionContainer}>
        <View style={styles.innerContainer}>
          <Text style={{ color: item.color, alignSelf: 'flex-start', fontSize: 25 }} key={item.key}>{item.label}</Text>
        </View>
      </View>
    )
  }

<CustomPicker
    placeholder={labelDefault}
    options={options} 
    getLabel={item => item.label}
    optionTemplate={this.renderOption}
    selectedValue={this.props.selectedValue}
    onValueChange={this.onValueChangeCustomPicker}
/>

Answer 2

我检查了源代码和文档，如果我想给样式占位符，我应该使用道具作为这样的字段模板。

<CustomPicker
          fieldTemplateProps={{textStyle:{color:"red",fontSize:22}}}
          placeholder={'Please select your favorite item...'}
          options={options}
          getLabel={item => item.label}
          optionTemplate={this.renderOption}
          headerTemplate={this.renderHeader}
          onValueChange={value => {
            Alert.alert('Selected Item', value ? JSON.stringify(value) : 'No item were selected!')
          }}
        />

在我的项目中有效 more detail

反应本机自定义选择器设置样式不起作用

2 个答案: