使用flex-wrap的React-Native项目符号列表

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

这是对我有用的已接受答案的版本：

bullet(text: String): View {
  return(
    <View style={ styles.row }>
      <View style={ styles.bullet }>
        <Text>{'\u2022' + " "}</Text>
      </View>
      <View style={ styles.bulletText }>
        <Text>{text}</Text>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    flexWrap: 'wrap',
    flex: 1,
    marginVertical: 4
  },
  bullet: {
    width: 10
  },
  bulletText: {
    flex: 1
  }
});

结果如下：

Answer 3

尝试将其全部包装在一个文本块中：

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