标签: react-native-sectionlist

我想建立一个网上商店，我需要一个反应本机的水平部分列表，包含我的产品。这是我的代码。请帮助我从右向左滚动。衣服是一个包含我的产品详细信息的对象数组。

    export default class MySectionList extends Component{
        render(){
            return(
               <SectionList
                   sections={Clothes} 
                   horizontal={true}
                   showsHorizontalScrollIndicator={false}
                   renderItem={({item})=>(
                       <View>
                           <Image source={{uri:"item.image",width:'65%',height:200}}/>
                           <Text>{item.name}</Text>
                           <Text>{item.price}</Text>
                       </View>
                  )}
                  renderSectionHeader={({section})=>(
                       <Text>{section.title}</Text>)}
              />
       )
    }
}

此部分列表从左到右滚动，我需要另一个从左到右滚动。

我使用的是react-native版本0.61.5。我想在反应本机中创建一个带有可折叠标题的部分列表，如下图所示。

这是我的 API 数据格式

data:[
  {
    shift_name:'Day',
    data:[
    {
      id:'1',
      fullname: "seela",
      inspection_date: "2020-06-10T04:45:32Z",
      issues: 1,
      response:{
        shift_name:'Day'
      }
     }
    ]
  },
  {
    shift_name:'Afternoon',
    data:[
      {
        id:'2',
        fullname: "Raju vijayan",
        inspection_date: "2020-06-9T04:45:32Z",
        issues: 3,
        response:{
          shift_name:'Afternoon'
        }
      },
      {
        id:'3',
        fullname: "Pratap P",
        inspection_date: "2020-06-8T04:45:32Z",
        issues: 2,
        response:{
          shift_name:'Afternoon'
        }
      }
    ]
  }
]

当我单击标题内容时应该展开和折叠。我怎样才能在react-native中做到这一点？

我需要创建一个屏幕目录（类别和产品）。我正在使用 React Native 中的SectionList 来实现这一目标。

当您滚动产品列表时，我需要使“类别”组件粘在顶部。有没有任何图书馆可以帮助我使用此目录屏幕？ 请看这里的图片..

import React from "react";
import { View, StyleSheet, SectionList } from "react-native";

import Text from "../Text";

const DATA = [
  {
    title: "Main dishes",
    data: ["Pizza", "Burger", "Risotto"],
  },
  {
    title: "Sides",
    data: ["French Fries", "Onion Rings", "Fried Shrimps"],
  },
  {
    title: "Drinks",
    data: ["Water", "Coke", "Beer"],
  },
  {
    title: "Desserts",
    data: ["Cheese Cake", "Ice Cream"],
  },
];

const TabCategories = () => (
  <View>
    <Text>Horizontal list of categories</Text>
  </View>
);

const Item …

我正在建立一个部分列表。每个部分都有一个具有不同值的不同数据对象。因此，我需要为每个部分渲染不同的组件，但我很难弄清楚如何做到这一点。

这是我的DATA数组（现在有两个是虚拟的）

const DATA = [
{
  title: "Groups",
  data: [
    {
      groupName: "Samwise",
    },
    
  ],
},
{
  title: "Noters"
    {
      userName: "Merri",
    },
  ],
},
{
  title: "Contacts",
  data: termIsContact.length ? termIsContact : contacts,
}]

部分列表组件

<SectionList
  sections={DATA}
  keyExtractor={(item, index) => item + index}
  renderItem={renderItem}
  renderSectionHeader={({ section: { title } }) => (
    <View style={tw.style(`justify-center bg-red-100 pl-4`, { height: 28 })}>
      <Text style={tw`text-base font-bold`}>{title}</Text>
    </View>
  )}
/>

我如何呈现联系人列表

const Item = ({ givenName, familyName }) => ( …

我正在使用 react-native 的 SectionList 并且无法隐藏数据集空白部分的部分标题。我只想显示部分标题和非空部分的行。

我正在尝试获取显示具有多列的部分列表。由于部分列表没有开箱即用的功能，我认为为每个部分项目呈现一个平面列表可能是一个好主意..但我没有让它工作。

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

import { FlatList } from "react-native";
import { SectionList } from "react-native";




class Account extends Component {


  data2 =
  [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Third Item',
    },
  ];

  data3 =
  [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28adfba',
      title: '22--First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91adafa97f63',
      title: '22--Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571efadfee29d72',
      title: '22--Third …

我需要实现可折叠的 sectionList 以及可拖动的可折叠标题。问题是我必须在使用 sectionList 作为列表视图的现有代码上实现可折叠和可拖动功能，如果有人可以帮助我提供任何代码或建议，那将会很棒，因为我是 React-Native 的新手并且发现它非常现阶段困难