React native：如何对原生 Picker（边框和箭头）进行风格化？答案

【问题标题】：React native: How to stylize native Picker(border and arrow)?React native：如何对原生 Picker（边框和箭头）进行风格化？
【发布时间】：2023-04-07 00:05:02
【问题描述】：

docs 中没有关于 Picker 支持哪些样式的信息。

我尝试将组件 Picker 与 TextInput 一起制作，但我所有尝试以与设置 TextInput 样式相同的方式设置 Picker 样式的尝试都失败了。

所以我请你帮我为 Picker 设置 border、borderRaduis、borderWidth 的样式。

也许你知道如何在 Picker 中自定义箭头符号。

我的代码的简化版本，见下文：

<View>
    <View>
        <Picker
            selectedValue={this.state.source}
            style={{
               // Styles here 
            }}
              onValueChange={(itemValue, itemIndex) =>
                  this.setState({ source: itemValue })
              }
        >
            <Picker.Item label="Item-1" value="item1" />
            <Picker.Item label="Item-2" value="item2" />
        </Picker>
    </View>
</View>

感谢您的关注。期待您的回复。

【问题讨论】：

标签： reactjs react-native styles

【解决方案1】：

我希望它会给你选择器边框...

          <View style={{  alignItems: 'center', borderColor: 'black', borderWidth: 1, borderRadius: 5, width: '60%', backgroundColor: 'transparent'  }}>
              <Picker
                 selectedValue={this.state.source}
                 style={{
                   height: 30,width: "100%",
                    }}
                 onValueChange={(itemValue, itemIndex) =>
                     this.setState({ source: itemValue })
                    }
                >
               <Picker.Item label="Item-1" value="item1" />
               <Picker.Item label="Item-2" value="item2" />
           </Picker>
        </View>

【讨论】：

你可以自己定制它......主要的一点是你必须把你的选择器放在一个视图中，并给那个视图样式像边框半径，borderWidth