删除 react-native Picker 底部的边框

Question

我在尝试从 react-native 中的默认选择器中删除底部边框时遇到问题。

我的代码：

<Picker
  style={styles.pickerStyle}
  selectedValue={this.state.registerType}
  onValueChange={(item) => this.setState({registerType:item})}>
  <Picker.Item label="Vælg emne" value="choose" />
  {registerTypes}
</Picker>

在下图中您可以看到我要删除的内容：

我已尝试使用 underlineColorAndroid='transparent' 属性，就像您在 TextInput 标记中所做的那样，但没有成功。有什么建议吗？

Answer 1

我知道这是一个简单的修复，但我的部分设计是更改选择器中的背景颜色，然后我猜边框隐藏在后面。

Answer 2

也许这不是最好的方法，但我找到了一个在我的项目中运行良好的快速解决方案。

为<View>和<Picker>定义一个高度，容器元素必须大1px。
设置 overflow: "hidden" 容器。

<View style={styles.container}>
  <Picker style={styles.picker}>
    <Picker.Item value="1" label="Yes" />
    <Picker.Item value="2" label="No" />
  </Picker>
<View>

container: {
    overflow: "hidden",
    height: 51
},
picker: {
    height: 50
}

删除 react-native Picker 底部的边框

Remove border in bottom of the react-native Picker

css

border

reactjs

react-native