webentwicklung-frage-antwort-db.com.de

Hinzufügen eines Rahmens nur zu einer Seite der <Text /> -Komponente in React Native (iOS)

Ich habe ein seltsames Problem mit der <Text/> - Komponente von React-Native in iOS.

Ich wollte den Stil borderBottomWidth auf die Komponente <Text/> Anwenden, aber es hat NICHT funktioniert. Die Option borderWidthfunktioniert.

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

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


Gibt es eine Möglichkeit, nur den Rand der untersten Ebene auf die Komponente <Text/> Anzuwenden?

Danke dir!

Hinweis :

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

  1. Wir können versuchen, <View/> In den <Text/> Zu wickeln und den Stil borderBottomWidth auf den <View/> Anwenden. (borderBottomWidth funktioniert gut mit <View/>)
  2. Hinzufügen eines solchen <View/> Direkt darunter zur <Text/> - Komponente, die wie eine Linie aussehen kann.
iosreactjsreact-nativereact-native-text
23
Nirav Dangi

Dies ist derzeit nicht möglich. Siehe das folgende RN-Problem: https://github.com/facebook/react-native/issues/29 und dieses Ticket zu Produktschmerzen: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput - /

10
Dave Sibiski

Obwohl borderBottom in der Textkomponente nicht funktioniert, hat es in der TextInput-Komponente für mich funktioniert. Setzen Sie einfach editierbar auf false und setzen Sie den Wert auf Ihren gewünschten Text.

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

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