Question

如何在React Native中创建类似于HTML中的无序列表（<ul>）的列表？它是否需要一个基于弹性的布局，其中包含两个View s（一个包含＆＃39; bullet＆＃39;＆amp;另一个列表项文本），或者它们是一种更容易，更简单的方式吗？

Answer 1

潜在地，最简单的方法就是为子弹使用unicode字符。这样你就不会将一堆组件包装在一起。

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

＆＃13;

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}
      />
    );
  }
}

＆＃13;

如果您需要保持文本不包围子弹，您实际上需要使用多个组件，如问题中所示。例如：

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

React Native＆＃39; Unordered＆＃39;-style List

1 个答案: