React Native“无序”样式列表

Question

如何在React Native中创建类似于HTML无序列表（<ul>）的列表？需要使用基于flex的布局并使用两个View元素（一个用于包含“项目符号”，另一个用于列表项文本），还是有更简单、不那么繁琐的方法吗？

- Steed-Asprey

---

我认为你需要手动编写基于flex的布局。Android/iOS不提供与<ul>等效的列表的本机支持。 - tetutato

你可以使用这个现成的组件 https://dev59.com/y1kT5IYBdhLWcg3wELgl#70830102 - Natesh bhat

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

---

听起来是一种合理的方法，但就格式而言，它无法实现HTML等效<ul>所能实现的防止列表项内容在符号下方换行的功能。请查看您在此处提供的代码：https://rnplay.org/apps/M5zw5Q -- 如何修改以防止文本换行？ - Steed-Asprey

在这种情况下，您实际上需要使用多个组件。我已经更新了我的答案，并提供了一个最小化的示例。 - Michael Helvey

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>
}

- Natesh bhat

---

这个样式很有帮助，谢谢。 - Sara Inés Calderón

Answer 3

考虑你有一个名为“ListItems”的列表，其中包含你想要的无序列表中的所有内容，我们可以按照以下方式解决此问题。这将为您提供所需的格式。

       <View>
          {ListItems.map(
            (item, index) => (
              <Text>
                {"\u2B24" + " "}
                {item}
              </Text>
            )
          )}
        </View>

- HARSH GADA

Answer 4

可以使用@jsamr/react-native-li库来实现此目的。

特点

• 支持超过40个有序和无序预定义标记
• 使用基于JS的CSS Counter Styles Level 3API轻松定义新标记
• 从右到左模式

安装

npm add --save @jsamr/react-native-li @jsamr/counter-style

用法

MarkedList组件的子元素将被包裹在一个标记视图中：

import React from 'react';
import { ScrollView, StyleSheet, Text } from 'react-native';
import disc from '@jsamr/counter-style/presets/disc';
import MarkedList from '@jsamr/react-native-li';

export default function App() {
  return (
    <ScrollView style={{ flexGrow: 1 }}>
      <MarkedList counterRenderer={disc}>
        {[...Array(100).keys()].map((index) => (
          <Text key={index} style={{ flexShrink: 1 }}>
            The World Wide Web Consortium (W3C)
            develops international standards
            for the web and HTML, CSS, and more.
          </Text>
        ))}
      </MarkedList>
    </ScrollView>
  );
}

注：在 CSS 技术中，“Marker” 是指有序前缀。

- Jules Sam. Randolph

Answer 5

你也可以尝试使用一个 View，将其设置为一个带有 Text 组件的 View，并且该 View 具有 flexDirection: 'row'

<View style={{height:5, width: 5, backgroundColor: '#000', borderRadius: 20}} />

如果您使用Unicode，就无法更改大小或颜色，因此我认为最好像这样使用。

- Prithin Babu