仅在 React Native (iOS) 中的 <Text/> 组件的一侧添加边框答案

【问题标题】：Adding border only to the one side of the <Text/> component in React Native (iOS)仅在 React Native (iOS) 中的 <Text/> 组件的一侧添加边框
【发布时间】：2016-07-26 11:41:05
【问题描述】：

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

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

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

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

谢谢！

注意：

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

我们可以尝试将<View/> 包装到<Text/> 并将borderBottomWidth 样式应用于<View/>。（borderBottomWidth 与 <View/> 配合得很好）
在<Text/> 组件的正下方添加这样的<View/>，它看起来像一条线。

【问题讨论】：

标签： ios reactjs react-native react-native-text

【解决方案1】：

我们现在可以使用：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：