web-dev-qa-db-fra.com

Ajouter une bordure uniquement à un côté du composant <Text /> dans React Native (iOS)

Je suis confronté à un problème étrange avec le composant <Text/> De React-Native dans iOS.

Je voulais appliquer le style borderBottomWidth au composant <Text/> Mais cela n'a PAS fonctionné. Cependant, l'option borderWidtha fonctionné.

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

  • NON travaillé<Text style={{borderBottomWidth:1}}> React Native </Text>


Existe-t-il un moyen d'appliquer uniquement la bordure de niveau inférieur au composant <Text/>?

Je vous remercie!

Remarque:

Je suis conscient des approches mentionnées ci-dessous pour y parvenir, mais dans mon cas, j'ai dû appliquer le style uniquement au composant <Text/>.

  1. Nous pouvons essayer d'encapsuler <View/> Dans le <Text/> Et d'appliquer le style borderBottomWidth au <View/>. (borderBottomWidth fonctionne très bien avec <View/>)
  2. Ajouter un tel <View/> Juste en dessous au composant <Text/> Qui peut ressembler à une ligne.
iosreactjsreact-nativereact-native-text
17
Nirav Dangi

Ce n'est actuellement pas possible. Voir le problème RN suivant: https://github.com/facebook/react-native/issues/29 et ce ticket sur Product Pains: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput - /

9
Dave Sibiski

Même si borderBottom ne fonctionne pas sur le composant Text, cela a fonctionné pour moi sur le composant TextInput, définissez simplement editable sur false et définissez la valeur sur le texte souhaité comme tel ...

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

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