React Native 创建具有多个条件的组件

Question

我有这样的数据结构：

const _ = require('lodash');

const bills = [
  {year:2021, month:5, bill:'bill in 2021 may'},
  {year:2018, month:1, bill:'bill in 2018 jan'},
  {year:2019, month:1, bill:'bill in 2019 jan'},
  {year:2018, month:2, bill:'bill in 2018 feb'},
  {year:2019, month:10,bill:'bill in 2019 oct'},
  {year:2019, month:2, bill:'bill in 2019 feb'},
  {year:2019, month:6, bill:'bill in 2019 jun'},
  {year:2020, month:11,bill:'bill in 2020 nov'}
];

我想使用原生基础的文本或卡片组件如下所示

2018
  1
    bill in 2018 jan
  2
    bill in 2018 feb
2019
  1
    bill in 2019 jan
  2
    bill in 2019 feb
  6
    bill in 2019 jun
  10
    bill in 2019 oct
2020
  11
    bill in 2020 nov
2021
  5
    bill in 2021 may

我的代码在下面使用 lodash 库在上面生成并显示在终端中

// sort the data first
let arrSortedTasks = _.orderBy(tasks, ['year', 'month'],['asc']);
// get all the different year from the data
let arrUniqYear = _.uniqBy(arrSortedTasks, 'year');
// get all the different month from the data
let arrUniqMonth = _.uniqBy(arrSortedTasks, 'month');
// take out only the value of the year
arrUniqYear =_.map(arrUniqYear, 'year');
// take out only the value of the month
arrUniqMonth =_.map(arrUniqMonth, 'month');

    let taskList = '';

    for (let year of arrUniqYear) {

        console.log(year);

        for (let month of arrUniqMonth) {

          let displayMonth = false;

          for (let obj of arrSortedTasks) {     

            if (obj.year === year && obj.month === month) {

                taskList = taskList + obj.task;

                displayMonth = true;

            } 

          }

          if (displayMonth) {

             console.log("  " + month);

          }

          if (taskList.length > 0) {

             console.log("    " + taskList);

          }

          taskList = '';

        }
    }

我们如何在 react-native 和 native-base 中显示组件？所以在这里不要让我发帖，如果太多的代码叹气。我尝试了几种方法购买得到了错误，但无法弄清楚。

Answer 1

我最终在渲染中使用数组作为返回对象

  renderBillsSection() {

    const { bills } = this.props;

    if(bills || bills.length > 0 ) {

      let arrSortedTasks = _.orderBy(tasks, ['year', 'month'],['asc']);
      let arrUniqYear = _.uniqBy(arrSortedTasks, 'year');
      let arrUniqMonth = _.uniqBy(arrSortedTasks, 'month');
      let billList = '', arr = [], yearIndex = 0, monthIndex = 0, billIndex = 0;

      arrUniqYear = _.map(arrUniqYear, 'year');
      arrUniqMonth = _.map(arrUniqMonth, 'month');

      for (let year of arrUniqYear) {

          arr.push(<Text key="{yearIndex}">{year}</Text>)

          yearIndex++

          for (let month of arrUniqMonth) {

            let displayMonth = false;

            for (let obj of arrSortedTasks) {     

              if (obj.year === year && obj.month === month) {

                billList = billList + obj.task

                displayMonth = true

              } 

            }

            if (displayMonth) {

               arr.push(<Text key="{monthIndex}" style={{marginLeft:10}}>{month}</Text>)

               monthIndex++

            }

            if (billList.length > 0) {

               arr.push(<Text key="{taskIndex}" style={{marginLeft:20}}>{billList}</Text>)

               billIndex++

            }

            billList = '';            

          }


      }

      return arr;

    }

  }

Answer 2

不确定你打算如何在 UI 中呈现它，但如果你想拥有这样的数据结构，你需要对它进行分组（如果尚未排序，则按 monhts 排序）

_(bills).groupBy('year').map((v,k)=> ({year: k, docs: _.sortBy(v,'month')})).value()

它会给你另一个数组，其中你有年份，abd docs 作为嵌套数组，包含当年的所有文档，这样你就可以再重复一次。

const bills = [
  {year:2021, month:5, bill:'bill in 2021 may'},
  {year:2018, month:1, bill:'bill in 2018 jan'},
  {year:2019, month:1, bill:'bill in 2019 jan'},
  {year:2018, month:2, bill:'bill in 2018 feb'},
  {year:2019, month:10,bill:'bill in 2019 oct'},
  {year:2019, month:2, bill:'bill in 2019 feb'},
  {year:2019, month:6, bill:'bill in 2019 jun'},
  {year:2020, month:11,bill:'bill in 2020 nov'}
]
let groupedDoc = _(bills).groupBy('year').map((v,year)=> ({year, docs: _.sortBy(v,'month')})).value();
console.log(groupedDoc);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

这是一个有效的 sn-p：

Answer 3

我认为你应该这样做：

const gropuByYear = _.groupBy(bills,'year'); console.log(_.map(groupByYear, groups => groups.forEach(group=>(<View> {obj.bill}</View>))) 甚至你也可以先按年份顺序排序，然后再循环祝你好运

Answer 4

你需要看看 React Native 的 SectionList。

查看this example 和cuiyueshuai 以获取更多实际示例。

SectionList 演示：

 <SectionList 
  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>} 
  renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>} 
  sections={[ 
   { title: 'Title1', data: ['item1', 'item2'] }, 
   { title: 'Title2', data: ['item3', 'item4'] }, 
   { title: 'Title3', data: ['item5', 'item6'] }, 
   ]} 
  keyExtractor={(item, index) => item + index} />