使用柔性包裝

我試圖創建項目符號列表，看起來像這樣陣營本地項目符號列表：使用柔性包裝

但我結束了與此相反：

React-native似乎不喜歡我使用嵌套的彈性盒。但我不確定如何表達對所有3行元素（子彈，粗體文本和普通文本）的需求，以內聯方式顯示，並在必要時包裝到下一行。

這是我反應過來的本地代碼：

var styles = StyleSheet.create({ 
    textWrapper: { 
     flexWrap: 'wrap', 
     alignItems: 'flex-start', 
     flexDirection: 'row', 
    }, 
    textBlock: { 
     flexWrap: 'wrap', 
     alignItems: 'flex-start', 
     flexDirection: 'row' 
     position: 'absolute', 
     left: 10 
    }, 
    boldText: { 
     fontWeight: 'bold', 
    }, 
    normalText: { 
    } 
}); 

<View style={ styles.textWrapper }> 
    <Text>{'\u2022'}</Text> 
    <View style={ styles.textBlock }> 
     <Text style={ styles.boldText }>{categoryName + ':'}</Text> 
     <Text style={ styles.normalText }>{value}</Text> 
    </View> 
</View>

來源

2016-11-05 Wookiem

這裏就是我終於想出了......我需要把項目符號和項目符號文本分成不同的列。我不知道爲什麼我必須爲列指定一個寬度，但留下寬度或使用flex：1不適合我。

感謝Nader建議構成解決方案的一部分的嵌套文本塊。

var styles = StyleSheet.create({ 
    column: { 
     flexDirection: 'column', 
     alignItems: 'flex-start', 
     width: 200 
    }, 
    row: { 
     flexDirection: 'row', 
     alignItems: 'flex-start', 
     flexWrap: 'wrap', 
     flex: 1 
    }, 
    bullet: { 
     width: 10 
    }, 
    bulletText: { 
     flex: 1 
    }, 
    boldText: { 
     fontWeight: 'bold' 
    }, 
    normalText: { 
    } 
}); 

<View style={ styles.column }> 
    <View style={ styles.row }> 
     <View style={ styles.bullet }> 
      <Text>{'\u2022' + " "}</Text> 
     </View> 
     <View style={ styles.bulletText }> 
      <Text> 
       <Text style={ styles.boldText }>{keyString + ": "}</Text> 
       <Text style={ styles.normalText }>{textEntry}</Text> 
      </Text> 
     </View> 
    </View> 
</View>

來源

2016-11-06 15:09:15 Wookiem

嘗試它包裹在一個單一的文本塊：

<View style={ styles.textBlock }> 
    <Text>{'\u2022'} 
     <Text style={ styles.boldText }>{categoryName + ':'}</Text> 
     <Text style={ styles.normalText }>{value}</Text> 
    </Text> 
</View>

來源

2016-11-05 22:35:22

此建議會導致文本在項目符號之後繼續（根據需要），但是文本換行不起作用（即文本只是在右邊被截斷）。 – Wookiem

如果出現這種情況，您可能需要現在添加自動換行。 –

很棒，upvote ..我需要一個諮詢：作爲*反應本地*標籤的頂級用戶，你認爲它學習它值得嗎？！有人說這是完美的，別人說這是一個可怕的想法..所以我很困惑，我想要製作一個移動應用程序（Android和iOS操作系統），好吧，有可能通過*反應本機制作專業應用程序*？還是反應本土只是讓我們做初學者的應用程序？另外，通過*反應native *創建的應用程序的質量如何？謝謝 – Shafizadeh

使用柔性包裝

回答

相關問題