User interface NativeBase CardItem文本是否不合适？

我使用的是react native+mobx+nativebase。我正在迭代一组对象。我正在使用。我对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>

{recipeStore.categories.map（（类别，索引）=>{
返回(
导航（'RecipeDetailScreen'，{recipe:category.recipes[0]}）}>
{category.name}

我还需要预测未来更长的单词。如果我得到更长的菜单，我不介意让它溢出到下一行。如下所示：

---

我如何制作我的卡片来处理长单词的溢出？

还没有完全复制您所拥有的内容，但是下面的方法可以工作。 在

中，默认情况下

和

将占用相等的空间。 使用flex属性允许

的宽度大于

汉堡包

您是否有任何重复回购协议供我们测试？抱歉，这是一个私人项目。不过，您知道如何处理它吗？我正在从事类似的项目，我将向您发布解决此问题的方法：）谢谢。谢谢@GaneshCauda。同样，如果我在您面前找到答案，我也会发布答案！

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