NativeBase CardItem Le texte n'est pas à sa place?

Question

J'utilise reac-native + mobx + nativebase. Je suis itérer sur un tableau d'objets. J'utilise NativeBase Card component. J'ai un problème avec l'interface utilisateur qui ne va pas. Voir ci-dessous:

note "hamburgers" semble funky. J'ai compris que cela est causé par la longueur du mot "Hamburgers". Quand je raccourcis à "Burgers", ça a l'air bien. Voir ci-dessous:

Ce code. Remarque: recipeStore.categories est un tableau d'objet.

{ recipeStore.categories.map((category, index) => { 
       return (
       <View key={index} style={{width: '33.3%', height: 300, padding: 20}}> 
        <Card> 
        <CardItem cardBody> 
         <Image 
         style={{width: '100%', height: 200}} 
         source={{uri: category.image}} 
         /> 
         </CardItem> 
         <CardItem button onPress={() => navigate('RecipeDetailScreen', { recipe: category.recipes[0] })}> 
         <Left> 
          <Ionicons name={category.icon} style={{fontSize: 25}}/> 
         </Left> 
         <Right> 
          <Text>{ category.name }</Text> 
         </Right> 
         </CardItem> 
        </Card> 
        </View> 

Je devrais anticiper pour un mot encore plus long dans le futur. Si je reçois un menu plus long, ça ne me dérange pas de le faire déborder sur la ligne suivante. Quelque chose comme ci-dessous:

Comment puis-je faire ma carte pour gérer le débordement de mots longs?

Answer 1

N'a pas répliqué exactement ce que vous avez, mais ce qui suit pourrait fonctionner. Dans le <CardItem footer>, le <Left> et le <Right> occupent par défaut un espace égal. Utilisez la propriété flex pour permettre <Right> d'être plus large que <Left>

<CardItem footer style={{flex:4}}> 
     <Left style={{flex:1}}> 
      <Ionicons name="ios-microphone"/> 
     </Left> 
     <Right style={{flex:3}}> 
      <Text>Hamburgerrrrsssssssss</Text> 
     </Right> 
    </CardItem>