NativeBase CardItemテキストが適切ではありませんか？

Question

私はreact-native + mobx + nativebaseを使用しています。私はオブジェクトの配列を繰り返しています。私はNativeBase Card componentを使用しています。私はUIがうまくいかない問題があります。以下を参照してください：

注 "ハンバーガー" はファンキーに見えます。私は、これが「ハンバーガー」という言葉の長さによって引き起こされていると考えました。私はそれを「バーガーズ」に短縮すると、うまく見えます。以下を参照してください：

これはコードです。注：recipeStore.categoriesはオブジェクトの配列です。

{ 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> 

私は将来さらに長い言葉を待つ必要があります。私が長いメニューを取得した場合、次の行にオーバーフローすることはありません。以下のような何か：

どのように私は私のカードは長い単語のオーバーフローを処理することができますか？

Answer 1

あなたの持っているものを正確に複製することはできませんでしたが、以下のものが機能します。 <CardItem footer>の場合、<Left>と<Right>は、デフォルトでは等しいスペースを占有します。 は<Right>がより広い<Left>

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