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

Question

我<Text/>在iOS中遇到了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-右上下对textinput- /