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

Question

我在 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/> 一起工作正常）
将这样的 <View/> 添加到看起来像一条线的 <Text/> 组件的正下方。

Answer 1

这目前是不可能的。请参阅以下 RN 问题：https://github.com/facebook/react-native/issues/29 and this ticket on Product Pains: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/

Answer 2

尽管 borderBottom 在 Text 组件上不起作用，但它在 TextInput 组件上对我有用，只需将 editable 设置为 false 并将值设置为所需的文本...

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

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

Answer 3

我们现在可以使用：

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

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

Adding border only to the one side of the <Text/> component in React Native (iOS)

ios

reactjs

react-native

react-native-text