NativeBase CardItem文本不正確？

我正在使用react-native + mobx + nativebase。我正在迭代一組對象。我正在使用NativeBase Card component。我的UI出現問題。請看下圖：NativeBase CardItem文本不正確？

注「漢堡包」看起來時髦。我發現這是由「漢堡包」這個詞造成的。當我縮短到「漢堡包」時，它看起來很好。請看下圖：

這是代碼。注意：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>

我將需要在未來預測更長的單詞。如果我得到更長的菜單，我不介意讓它溢出到下一行。類似下面：

我怎樣才能讓我的卡處理的長單詞溢出？

來源

2017-08-19 Iggy

你對我們有什麼重複回購來測試？ –

對不起，這是一個私人項目。但是，你有什麼想法如何處理它？ – Iggy

我在類似的項目上工作，我會發布你我的方法來解決這個問題:)乾杯 –

尚未完全複製您擁有的內容，但以下內容可以正常工作。在<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>

來源

2017-09-09 04:47:14

NativeBase CardItem文本不正確？

回答

相關問題