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

即使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
    },
})

Answer 4

<Text style={{
  borderBottomWidth: 1,
  borderBottomColor: 'red',
  borderBottomStyle: 'solid'
}}> 
  React Native 
</Text>

或

borderBottom: '1px solid rgba(219, 219, 219, 1)'

仅在React Native（iOS）

4 个答案: