私はこのようになります箇条書きリストを作成しようとしているフレックスラップ

Question

を使用して反応させ、ネイティブの箇条書き：

をしかし、私はこの代わりに終わるよ：

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> 

Answer 1

は、ここで私は置くために必要な...私は最終的に思いついたものです箇条書きと箇条書きのテキストを別の列に追加します。私はなぜ列の幅を指定しなければならないのか分かりませんが、幅を残すか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> 

Answer 2

は、単一のテキストブロック内のすべてをラップしてみてください。

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