React Native 'Unordered' 样式列表

Question

如何在 React Native 中创建一个看起来类似于 HTML 中的无序列表（ <ul> ）的列表？它是否需要具有两个 View s（一个包含“项目符号”，另一个包含列表项文本）的基于 flex 的布局，或者它们是一种更简单、不那么麻烦的方式？

原文由 Steed-Asprey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

潜在地，最简单的方法就是对项目符号使用 unicode 字符。这样您就不必将一堆组件包装在一起。

例如，以下使用 ListView 的组件（请参阅 renderRow 函数）：

 class TestProject extends React.Component {

  constructor() {
    super();
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }).cloneWithRows(['string1', 'string2', 'string3']),
    };
  }

  renderRow(data) {
    return (
      <Text>{`\u2022 ${data}`}</Text>
    );
  }

  render() {
    return (
      <ListView
        style={{margin: 40}}
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />
    );
  }
}

如果您需要防止文本环绕项目符号，您实际上需要使用多个组件，如问题中所建议的那样。例如：

 renderRow(data) {
  return (
    <View style={{flexDirection: 'row'}}>
      <Text>{'\u2022'}</Text>
      <Text style={{flex: 1, paddingLeft: 5}}>{data}</Text>
    </View>
  );
}

原文由 Michael Helvey 发布，翻译遵循 CC BY-SA 3.0 许可协议