ios - 仅在一侧添加边框React Native (iOS) 中的组件

Question

我在iOS<Text/>中遇到了 React-Native组件的一些奇怪问题。

我想将borderBottomWidth样式应用到<Text/>组件中，但它不起作用。但是，该borderWidth选项有效。

• 工作过 <Text style={{borderWidth:1}}> React Native </Text>

• 没有工作 <Text style={{borderBottomWidth:1}}> React Native </Text>

有没有办法只将底层边框应用到<Text/>组件中？

谢谢！

---

笔记：

我知道以下提到的方法可以实现这一点，但就我而言，我只需要将样式应用于<Text/>组件。

1. 我们可以尝试包装<View/>到<Text/>并将borderBottomWidth样式应用于<View/>. （borderBottomWidth适用于<View/>）
2. <View/>在下面添加这样的<Text/>组件，看起来像一条线。

Answer 1

尽管borderBottom 不适用于Text 组件，但它确实适用于TextInput 组件，只需将editable 设置为false 并将值设置为您想要的文本......

<TextInput
    style={styles.textInput}
    editable={false}
    value={'My Text'}/>

const styles = StyleSheet.create({
    textInput: {
        borderBottomColor: 'black',
        borderBottomWidth: 1,
    }
});

Answer 2

这目前是不可能的。请参阅以下 RN 问题：https ://github.com/facebook/react-native/issues/29和这张关于产品痛点的票：https ://productpains.com/post/react-native/add-borderwidth-left- right-top-bottom-to-textinput-/

Answer 3

我们现在可以使用：

const styles = StyleSheet.create({
    textZone: {        
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10,
        borderBottomRightRadius: 10,
        borderBottomLeftRadius: 10
    },
})