react native - android - Picker 有下划线

Posted 2023-02-25

【中文标题】react native - android - Picker 有下划线

【英文标题】：react native - android - Picker has underline

【发布时间】：2017-10-03 21:33:08

【问题描述】：

Picker 样式有问题 - 它在 android 上具有类似 TextInput 的下划线，但 underlineColorAndroid = 'transparent' 或任何其他颜色都不起作用。

我正在使用来自 NativeBase 的 Picker，这个 Picker 替换了 ReactNative Picker。所以这是我的代码。我试过用Input(NativeBase) 包装Item 或用underlineColorAndroid 属性包装TextInput，因为只有TextInput 可以拥有这个道具，但没有运气。使用 bottomBorderColor 更改组件的样式也不会产生结果。谁能帮帮我？

          <View>
             <Form>
               <Item inlineLabel>
                 <Label>Region</Label>

                 <Picker
                   style= alignItems: 'flex-end', width: 200 
                   placeholder='...'
                  >
                    <Picker.Item label="..."/> //this first Item rendered as underlined
                 </Picker>
               </Item>
           </Form>
      </View>

【问题讨论】：

所以Form中的每个Item都有下划线，看起来Label下有1行，Picker下有2行

下划线应该作为 Picker 中的项目分隔符。为什么要删除该下划线？

@wlisrausr 请看上面的图片

哦，好吧。那么您要删除哪个边框？ Item 或 Picker 中的边框？

@wlisrausr Picker 的边界。实际上在4.4.3以后的ios或Android上是没有双边框的，只有Form Item的底线

【参考方案1】：

将style=borderColor:"transparent" 添加到<Item> 标记中。

         <View>
             <Form>
               <Item inlineLabel style=borderColor: "transparent">
                 <Label>Region</Label>

                 <Picker
                   style= alignItems: 'flex-end', width: 200 
                   placeholder='...'
                  >
                    <Picker.Item label="..."/> //this first Item rendered as underlined
                 </Picker>
               </Item>
           </Form>
      </View>