Hinzufügen Grenze nur auf einer Seite <Text/> Komponente Reagieren Native (iOS)

Ich bin vor etwas seltsames Problem mit Reagieren-Native <Text/> Komponente in iOS.

Wollte ich anwenden borderBottomWidth Stil in <Text/> Komponente, aber es hat NICHT funktioniert. Jedoch, die borderWidth option gearbeitet.

  • Gearbeitet

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

  • NICHT Gearbeitet

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

Gibt es eine Möglichkeit nur anwenden, unteren Ebene, die Grenze in die <Text/> Komponente?

Danke!

Hinweis:

Ich bin mir bewusst, folgenden genannten Ansätze, um dies zu erreichen, aber in meinem Fall, ich erforderlich, um die Stil nur auf die <Text/> Komponente.

  1. Wir können versuchen, das einwickeln <View/> zu den <Text/> und gelten borderBottomWidth Stil der <View/>. (borderBottomWidth funktioniert gut mit <View/>)
  2. Hinzufügen wie <View/> nur unten, um die <Text/> Komponente, die können Aussehen wie eine Linie.
InformationsquelleAutor Nirav Dangi | 2016-04-06
  1. 8

    Dies ist derzeit nicht möglich. Finden Sie in der folgenden RN Problem: https://github.com/facebook/react-native/issues/29 und das ticket auf Produkt-Schmerzen: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/

    InformationsquelleAutor Dave Sibiski
  2. 17

    Obwohl borderBottom nicht die Arbeit an der Text-Komponente, es funktionierte für mich auf die TextInput-Komponente, setzen Sie einfach editable auf false und den Wert auf den gewünschten text, wie so...

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

const styles = StyleSheet.create({
    textInput: {
        borderBottomColor: 'black',
        borderBottomWidth: 1,
    }
});
    InformationsquelleAutor Chaim Paneth
Schreibe einen Kommentar