NativeBase CardItem文本不正确？

Question

我正在使用react-native + mobx + nativebase。 我正在遍历一系列对象。 我正在使用NativeBase卡组件 。 我的用户界面出现问题。 见下文：

注意“汉堡包”看起来很时髦。 我发现这是由“汉堡包”一词的长度引起的。 当我将其简称为“汉堡”时，看起来不错。 见下文：

这是代码。 注意：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>将占据相等的空间。 使用flex属性允许<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>