React Native Picker - 样式选择器不是灰色的

Posted

技术标签:

【中文标题】React Native Picker - 样式选择器不是灰色的【英文标题】:React Native Picker - Styling selector to not be grey 【发布时间】:2021-01-02 09:35:37 【问题描述】:

我正在尝试在选择器组件中设置选择器背景的样式,下图中有灰色背景。我正在尝试将其更改为白色背景并在其周围设置边框。

   <Picker
        selectedValue=selectedProject
        onValueChange=(text) => 
          setSelectedProject(text as string);
        
        style=
          width: '50%',
          alignSelf: 'center',
        
        itemStyle=
          height: 200,
        >
          <Picker.Item key='all' label='all' value='all' />
          <Picker.Item key='all1' label='all1' value='all1' />
          <Picker.Item key='all2' label='all2' value='all2' />
   </Picker>

我什么都试过了——这让我觉得做不到。

我尝试将backgroundColour / colour 属性添加到Picker 组件的styleitemStyle,但这些都不起作用。

是否可以设置这个灰色选择框的样式?

【问题讨论】:

你能否检查元素本身作为呈现的 html 所做的事情并在样式表中编写一些 css 来覆盖它? 【参考方案1】:

从react-native-picker 中的问题中,有一个talking 关于自定义选择器内的选定项。

此外,目前不可能这样做,因为选择指示器样式的原生属性还没有被桥接。

RNPicker.m 文件中的代码应修改以处理自定义。

[self selectRow:0 inComponent:0 animated:YES]; // Workaround for missing selection indicator lines (see https://***.com/questions/39564660/uipickerview-selection-indicator-not-visible-in-ios10)

【讨论】:

以上是关于React Native Picker - 样式选择器不是灰色的的主要内容,如果未能解决你的问题,请参考以下文章

如何设置标准 react-native android 选择器的样式?

React Native Picker 移回第一个项目

react native中利用Picker自定义日期组件(只包含年和月)

react-native 图片选取与上传

样式化 React Native 选择器

React Native Picker (多列数据)