主页 / coding / 问题 / 77029628
Accepted
Phil Lucks
Asked: 2023-09-03 02:47:25 +0800 CST

反应原生元素输入边框底部问题，​​带半径

  • 772

如何使用 RNElements 更改输入的底部边框，使其与其他边匹配？

造型：

inputStyle: {
        borderWidth: 0,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderTopWidth: 1,
        borderBottomWidth: 1, // toggle to 0 doesn't help
        borderRadius: 5,
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 5,
      },

我看到底层 RN 输入对此有一个注释：

默认情况下，TextInput 在其视图底部有一个边框。该边框的内边距由系统提供的背景图像设置，并且无法更改。避免这种情况的解决方案是要么不显式设置高度，在这种情况下系统将负责在正确的位置显示边框，要么通过将 underlineColorAndroid 设置为透明来不显示边框。

我尝试过这个论坛的其他建议，也没有设置高度，underlineColorAndroid: 'transparent',在我的主题上设置默认值，borderWidth: 0,但没有成功。

react-native

1 个回答

  1. Best Answer
        <Input
      containerStyle={{ borderWidth: 0 }}
      inputContainerStyle={{
        borderWidth: 0,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderTopWidth: 1,
        borderBottomWidth: 2,
        borderRadius: 5,
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 5
      }}
      placeholder="Email"
    />

    我认为你使用inputStyle={{}}. 让我们尝试一下inputContainerStyle={{}}。

    • 1

相关问题