1
votes

Comment puis-je créer une interface utilisateur avec Arrow React native?

Je souhaite créer une interface utilisateur comme l'image ci-dessous.

Comment puis-je l'implémenter? Tout le monde a une idée pour cela. Pls aidez-moi. Merci

react-native mobile view uiview

0 commentaires

3 Réponses :

0
votes

Oui .. vous pouvez concevoir cette flèche avec position: propriété css 'absolue'. essayez d'implémenter le code ci-dessous!

     <View style={{ marginTop: 10, marginHorizontal: 15 }}>
      <View style={{ position: 'relative' }}>
        <View style={{ borderWidth: 1, padding: 5, backgroundColor: '#e5f8ff', borderColor: '#007299'  }}>
          <Text>Top Note</Text>
        </View>
        <View style={{ position: 'absolute', top: 9, left: -5 }}>
          <View style={{ borderBottomWidth: 1, borderLeftWidth: 1 ,backgroundColor: '#e5f8ff', borderColor: '#007299', width: 10, height: 10, transform: [{ rotate: '45deg'}] }}>

          </View>
        </View>
      </View>
    </View>

vérifiez cette image a>

0 commentaires

0
votes

Voici une Démo

Comme la réponse @pds le suggère également, vous devez rendre le composant flèche comme absolu pour le positionner sur le corps du message.

En utilisant le triangle CSS et le positionnement absolu, vous pouvez obtenir la démo fonctionnelle.

0 commentaires

0
votes

Voici quelques bibliothèques qui vous aideront à réaliser l'intégralité de votre interface utilisateur: