React natif <Text> déborde <View> quand dans un flex

Question

Donc, pour l'image ci-dessus, je tente d'obtenir la boîte « verte » à enrouler autour du texte dynamique. Remarquez comment les zones de texte bleu et jaune sont dans une configuration flex: 'row', et la zone bleue du texte est à flex: 2 et le jaune est flex: 1. Les choses fonctionnent bien jusqu'à ce que le texte soit trop gros pour le conteneur parent.

J'aimerais que le contenant vert croisse au besoin pour s'adapter aux enfants intérieurs fléchis. Est-ce possible avec une réaction native?

est ici une image de ce qu'il ressemble dans un sens web:

J'ai essayé de placer la boîte verte d'avoir un flex: 1 mais il est trop grand car il remplit l'écran . Réglage height est possible, mais je ne connais pas la taille du plus grand composant interne (au moins sans un hackery). J'ai même essayé minHeight.

Est-ce que quelqu'un a essayé quelque chose comme ça? Ai-je besoin d'obtenir dynamiquement la hauteur des éléments internes?

MISE À JOUR - Voici le bit de code:

<View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}> 
    <View 
     style={{ 
     minHeight: 40, 
     borderWidth: 1, 
     borderStyle: 'solid', 
     padding: 5, 
     margin: 5, 
     backgroundColor: '#58c09e' 
     }} 
    > 
     <View style={{ flex: 1, flexDirection: 'row' }}> 
     <View style={{ flex: 2, backgroundColor: '#eeff96' }}> 
      <Text> 
      Hello this is a long bit of text that will fill up the entire column to see how the text will wrap 
      </Text> 
     </View> 
     <View style={{ flex: 1, backgroundColor: '#eeffff' }}> 
      <Text>Hello again?</Text> 
     </View> 
     </View> 
    </View> 
    </View> 

Merci pour la recherche.

Answer 1

Ok après avoir regardé autour d'un peu plus et la lecture: flex vs flexGrow vs flexShrink vs flexBasis in React Native? j'ai pu comprendre le problème.

Ce que je avais besoin était flex: 0 sur la ligne:

<View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}> 
    <View 
     style={{ 
     minHeight: 40, 
     borderWidth: 1, 
     borderStyle: 'solid', 
     padding: 5, 
     margin: 5, 
     backgroundColor: '#58c09e' 
     }} 
    > 
     <View style={{ flex: 0, flexDirection: 'row' }}> 
     <View style={{ flex: 2, backgroundColor: '#eeff96' }}> 
      <Text> 
      Hello this is a long bit of text that will fill up the entire column to see how the text will wrap 
      </Text> 
     </View> 
     <View style={{ flex: 1, backgroundColor: '#eeffff' }}> 
      <Text>Hello again?</Text> 
     </View> 
     </View> 
     <View> 
     <Text>Here's another test</Text> 
     </View> 
    </View> 
    </View> 

Ce produit ce que j'attendais:

donc je suppose que le FlexBox ne fonctionne pas »[s] du de la même manière dans React Native que dans CSS sur le web "comme ils le disent dans leur documentation.

Answer 2

Essayez cette Coode ->

<View style={{flex:1,flexDirection:'row',borderWidth:1,padding:5}}> 
    <View style={{flex:0.7}}> 
     <Text> 
      Hello This is long bit of text that will fill up the entire 
      column to see how the text will wrap 
     </Text> 
    </View> 

    <View style={{flex:0.3}}> 
     <Text>Hello Again</Text> 
    </View> 

</View>