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

【问题标题】：React-Native bulleted lists using flex-wrap使用 flex-wrap 的 React-Native 项目符号列表
【发布时间】：2016-11-05 18:43:52
【问题描述】：

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

但我最终还是这样做了：

React-native 似乎不喜欢我使用嵌套的弹性盒子。但我不确定如何表达对所有 3 个行元素（项目符号、粗体文本和普通文本）进行内联显示并在必要时换行到下一行的需求。

这是我的 react-native 代码：

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>

【问题讨论】：

标签： react-native

【解决方案1】：

这就是我最终想出的...我需要将项目符号和项目符号文本放在不同的列中。我不知道为什么我必须为列指定宽度，但忽略宽度或使用 flex: 1 对我不起作用。

感谢纳德建议嵌套文本块，这是解决方案的一部分。

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>

【讨论】：

【解决方案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
  }
});

结果如下：

【讨论】：

【解决方案3】：

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

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

【讨论】：

此建议会导致文本在项目符号之后继续（根据需要），但文本换行不起作用（即文本只是在右边缘被截断）。
如果是这种情况，您现在可能需要添加 flex-wrap。
太棒了，点赞.. 我需要咨询一下：作为 react native 标签的顶级用户，您认为值得学习吗？！有人说完美，有人说这是一个糟糕的主意..所以我很困惑，我想做一个移动应用程序（适用于Android和iOS操作系统），嗯，是否可以通过制作专业应用程序反应原生？或者 React Native 只是让我们制作初学者应用程序？另外，由 react native 创建的应用程序的质量如何？谢谢
您的建议无效。你有完整的代码吗？