React Native'无序'式列表

Question

如何在React Native中创建一个类似于<ul>HTML中的无序列表()的列表？它是否需要一个带有两个Views的基于flex的布局(一个包含'bullet'和另一个包含列表项文本)或者它们是一种更简单,更简单的方法吗？

Answer 1

潜在地,最简单的方法就是使用unicode字符作为子弹.这样你就没有将一堆组件包装在一起.

例如,以下使用a的组件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>
  );
}

Answer 2

您可以使用此组件来实现此目的：享受

export const UnorderedList = ({texts}: {texts: string[]}) => {
  return (
    <Column>
      {texts.map((t, index) => (
        <Row key={index}>
          <Column
            style={{
              alignSelf: 'flex-start',
              justifyContent: 'flex-start',
              marginRight: 12,
              transform: [{scale: 2.5}],
            }}>
            <Text
              style={{
                alignSelf: 'flex-start',
                justifyContent: 'flex-start',
              }}>
              {'\u2022'}
            </Text>
          </Column>
          <Column>
            <Text>{t}</Text>
          </Column>
        </Row>
      ))}
    </Column>
  );
};


const Column = ({children,style})=>{
   return <View
      style={[{display: 'flex', flexDirection: 'column'},style]}>
      {children}
    </View>
}

const Row = ({children,style})=>{
   return <View
      style={[{display: 'flex', flexDirection: 'row'},style]}>
      {children}
    </View>
}