Добавление границы только на одну сторону компонента <Text /> в React Native (iOS)

Question

Я столкнулся с какой-то странной проблемой с React-Native's <Text/> компонент в iOS.

Я хотел подать заявку 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

В настоящее время это невозможно. См. Следующую проблему RN: https://github.com/facebook/react-native/issues/29 и этот билет о проблемах с продуктом: 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

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

или

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

Answer 4

Теперь мы можем использовать:

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