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

Question

我正在尝试创建一个如下所示的项目符号列表：

但是我最终却得到了这个：

React-native似乎不喜欢我使用嵌套的flex框。但是我不确定如何表达所有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

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

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 2

这是我终于想到的...我需要将项目符号和项目符号文本放在单独的列中。我不确定为什么我必须为列指定宽度，但是忽略宽度或使用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>