Aggiunta del bordo solo a un lato del componente <Text/> in React Native (iOS)

Question

Sono di fronte a qualcosa di strano con il componente <Text/> di React-Native in iOS.

Ho voluto applicare lo stile borderBottomWidth nel componente <Text/> ma NON ha funzionato. Tuttavia, l'opzione borderWidthha funzionato.

• Ha lavorato <Text style={{borderWidth:1}}> React Native </Text>

• non lavorate <Text style={{borderBottomWidth:1}}> React Native </Text>

C'è un modo per applicare unica frontiera livello più basso nel componente <Text/>?

Grazie!

---

Nota:

Sono consapevole delle seguenti approcci menzionati al fine di raggiungere questo obiettivo, ma nel mio caso, ho l'obbligo di applicare lo stile alla sola componente <Text/>.

1. Possiamo provare avvolgendo <View/> al <Text/> e applicare borderBottomWidth stile al <View/>. (borderBottomWidth funziona correttamente con <View/>)
2. Aggiungendo tale <View/> appena sotto al componente <Text/> che può sembrare una linea.

Answer 1

Questo non è attualmente possibile. Vedere il seguente numero RN: https://github.com/facebook/react-native/issues/29 e questo ticket sui prodotti: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/

Answer 2

Anche se borderBottom non funziona sul componente Testo, ha funzionato per me sul componente TextInput, basta impostare modificabile su falso e impostare il valore al testo desiderato in questo modo ...

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

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