React原生SectionList呈现不相关
React Native是一种用于构建跨平台移动应用程序的框架。SectionList是React Native中的一个组件，用于呈现具有分组标头的列表数据。
React原生SectionList呈现不相关的问题可能是由以下原因引起的：
- 数据源错误：确保你提供给SectionList的数据源是正确的，且数据项与分组标头对应。可以通过打印数据源或使用调试工具来确认数据是否正确。
- 错误的keyExtractor：keyExtractor属性用于提取列表项的唯一标识符。确保你在keyExtractor中指定了正确的键，以便React能够准确地识别和更新列表项。
- 未正确设置renderItem和renderSectionHeader属性：确保你正确地设置了renderItem属性来呈现每个列表项，并使用renderSectionHeader属性来呈现每个分组的标头。这两个属性都应该是函数，用于定义列表项和分组标头的外观。
- 样式问题：检查你是否为SectionList和其子组件设置了正确的样式。可能需要调整样式以确保列表项和分组标头正确地显示和排列。
- 不正确的数据转换：如果你的数据源需要转换或处理，确保你在提供给SectionList之前正确地转换数据。例如，如果你的数据源是异步获取的，你可能需要在数据完全加载后再渲染SectionList。
对于React原生SectionList呈现不相关的问题，可以尝试以下解决方案：
- 首先，检查数据源是否正确，确保每个数据项都与相应的分组标头对应。
- 确认keyExtractor属性的设置是否正确，以便React能够正确地识别和更新列表项。
- 确保renderItem和renderSectionHeader属性正确设置，用于呈现列表项和分组标头。
- 检查样式是否正确设置，包括SectionList和其子组件的样式。
如果问题仍然存在，可以参考腾讯云相关产品来优化React Native应用程序的性能和稳定性，如使用云函数 SCF（Serverless Cloud Function）来处理数据源、使用云存储 COS（Cloud Object Storage）存储数据、使用云监控 CLS（Cloud Log Service）监控应用程序日志等。
腾讯云产品链接：
- 云函数 SCF：https://cloud.tencent.com/product/scf
- 云存储 COS：https://cloud.tencent.com/product/cos
- 云监控 CLS：https://cloud.tencent.com/product/cls
相关·内容
我正在尝试从一个名为SectionList的json文件创建一个notes.json。基本上，notes json数组中的一个对象将对应于一个SectionList条目。我已经在notesData中加载了json数组。但是，当我尝试使用notesData作为SectionList的源代码时，我会得到错误：TypeError: undefined is not an object (evaluating 'props.sections.reduce')
这是我的代码：
import React from 'react';
import { Text, View,
浏览 1提问于2018-03-12得票数 2
回答已采纳
如何在React Native中使用SectionList中的复选框进行选中或取消选中。而不使用第三方模块。
浏览 0提问于2018-04-28得票数 0
根据FB文档，你可以在react原生的SectionList中覆盖renderItem默认的基于项目的渲染来使用基于节的渲染，但我还没有找到这样做的方法。请帮帮忙。
浏览 0提问于2021-05-25得票数 2
我有一个SectionList，它有很多图像是从一个防火墙存储中获取的。当它向下滚动时，它会迅速地产生许多警告。
WebImage组件如下所示：
import React, { Component } from 'react'
import { View, Image } from 'react-native'
import firebase from 'firebase'
class WebImage extends Component {
state = {
imgsrc: '',
mounte
浏览 3提问于2017-07-06得票数 1
我知道SectionList默认将其头放在iOS中。但是，当SectionList被ScrollView包围时，不再使用粘性头。
我的基本结构是这样的。
<ScrollView>
<Text style={styles.paragraph}>...</Text>
<SectionList />
</ScrollView>
(而实时测试代码是 )
如果我删除了ScrollView和Text，那么粘贴头很好。但是我想在Image启动之前显示一个文本(或者View )。
有什么办法可以解决吗？
谢谢。
浏览 3提问于2017-08-01得票数 0
回答已采纳
我在一个动画底部工作表组件中有一个SectionList，但是当这个组件嵌套在Android上时，它不会滚动。我怎样才能让它在iOS上表现得像它一样？
将SectionList作为支持子程序的父级底部工作表：
return (
<GestureDetector gesture={gesture}>
<AnimatedView style={animatedStyle}>
<Line />
<Title>{title}</Title>
<>{childr
浏览 20提问于2022-05-09得票数 1
我正在为创建一个包装器，它应该包含SectionList使用的所有道具，以及我的自定义道具。我如何配置类型记录呢？
以下是我的尝试：
import React from 'react';
import { SafeAreaView, SectionList } from 'react-native';
interface EnhancedSectionListProps {
...SectionListProps; // this obviously won't compile, but shows what I'm trying to
浏览 1提问于2020-05-27得票数 1
回答已采纳
如果在我的代码中有这个简单的定义：
const s = (
<SectionList
renderItem={({ item }) => <Text>abc</Text>}
renderSectionHeader={({ section }) => <Text>abc</Text>}
sections={[{ data: [1, 2, 3], title: 'abc' }]}
/>
);
流生成这个错误消息，它引用了整个“标记块”(实际上是从VSCode粘贴的副本)：
[fl
浏览 5提问于2017-10-05得票数 5
我想在我的MessageDialog中保存对this.SectionList上的SectionList的推荐。我尝试在第31行定义允许SectionList的接口，但没有效果。我该怎么办？
TypeScript抱怨说：MessageDialog.tsx(132,38): error TS2339: Property 'SectionList' does not exist on type 'SkademeldingDialog'
29 interface IComponentProps {
30 navigation: NavigationScreenP
浏览 1提问于2017-12-14得票数 0
回答已采纳
1回答
我是比较新的React和React native，但我在填充SectionList时遇到了一个问题，还找不到解决方案。
我有一个对象数组，每个对象都有自己的数组。数据是显示此信息的理想选择，然而，每个部分的数组并不称为“SectionList”，而SectionList似乎期望每个部分中的数组具有关键的“数据”。
有没有办法告诉SectionList使用另一个键而不是数据键来填充每个部分的数组？
浏览 9提问于2018-07-24得票数 5
基本上，我想使用方法的，但我不能设法在一个功能组件内设置ref。
注意:对于下面的例子，SectionList的强制属性被省略，以提高清晰度。
我试过使用useRef，但这不起作用，3秒后ref仍然是null。
const MyComponent = () => {
const ref = React.useRef()
React.useEffect(() =>
setTimeout(() => ref.scrollToLocation({itemIndex: 0, sectionIndex: 0}, 3000)
)
return (
<
浏览 9提问于2021-02-03得票数 0
回答已采纳
在呈现一些数据后，如何在React中添加分隔符-原生FlatList？
我已经试过使用React本机SectionList，但是我不能像在FlatList中那样添加fetchNext函数。
这是我目前的代码
<FlatList
data={data}
keyExtractor={keyExtractor}
renderItem={renderItem}
fetchNext={fetchNextPage}
numColumns={2}
ItemSeparatorComponent={<View style={this.separatorStyles} />
浏览 3提问于2019-05-16得票数 0
回答已采纳
我已经尝试过Flatlist、SectionList、Animated.Flatlist和Animated.SectionList，下面是一个简单的示例如何检查scrollToLocation：
<SectionList
onLayout={this.onLayout.bind(this)}
ref={ref => {
this.sectionList = ref
console.log('ref.scrollToLocation: ' + CircularJSON.stringify(ref.scrollToLocatio
浏览 0提问于2019-02-10得票数 1
我在React中有这个简单的组件--本机，我的目标是跳过迭代，如果给定的参数gradeIsMandatory是假的，那么它只应该在Per修保证和价格上迭代，我如何在不影响性能的情况下实现这个结果？我会接受任何建议，谢谢
import React, { useCallback } from 'react';
import { View, Text, SafeAreaView, SectionList, StyleSheet, Image, TouchableOpacity, Alert} from 'react-native';
export con
浏览 5提问于2022-02-08得票数 0
回答已采纳
我的第一个想法是尝试从嵌套列表中删除项目。我已经开始使用SectionList和一个具有管理SectionList数据更改的useState的组件。我正在尝试使用SectionList来解决这个问题，但最好能显示所有可能的备选方案(FlatList、ViewList等)。
我想出了如何删除整个章节列表(和他的项目)，而不是逐项删除。我读过很多帖子，但我没有发现任何与管理SectionList条目有关的东西。也许有一个关于FlatList嵌套项的答案。
在这里，我留下了一个可以使用的示例代码(没有样式)，该代码基于React原住民官方文档：
import React, { useEffect }
浏览 10提问于2022-09-02得票数 0
回答已采纳
我只想做些简单的事但我不能。 import * as React from 'react';
import {
View,
Button,
ScrollView
} from 'react-native';
const server = require("../server.json");
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.x = "
浏览 28提问于2020-12-14得票数 0
我在react原生项目中有一个sectionList。如果项目发生更改，则不会重新呈现。我的代码：
test.js
class Test extends React.Component {
started = false;
causeData=[];
showLess=false;
items = [];
_start = () => {
const { ws } = this.props;
this.showLess = false;
if (ws.causes.length) {
this.causeData = {
title: Langua
浏览 1提问于2019-04-05得票数 2
1回答
我正在学习反应本地应用程序。我从开源应用中找到了一个关于FlatList的演示应用程序，用户可以在这里点击屏幕的下边和屏幕的上方。我希望在SectionList中实现相同的逻辑，根据React本机文档，FlatList和SectionList几乎有相同的道具。但是，当我尝试实现向下滚动和向上按钮逻辑SectionList时，它不起作用。这让我犯了错误。下面是他们使用的，FlatList向下滚动和向上滚动逻辑。
这里是我对SectionList 和 的失败尝试
import React from "react";
import {
StyleSheet,
Text,
浏览 8提问于2022-11-23得票数 1
回答已采纳
我在渲染SectionList时遇到了奇怪的问题。向列表中添加新项目时，以前添加的项目重复。在第一次渲染和第一次添加项目时不会发生，仅在第二次添加新项目时发生，然后继续进行
代码如下：
<SectionList
ref={ref => this.sectionList = ref}
sections={this.state.itemData}
renderItem={({ item }) => this.renderMessages(item)}
renderSectionFooter={({ section }) => this.renderSecti
浏览 8提问于2020-03-12得票数 0
我尝试在sectionlist中呈现一个dropdown-picker (react-native-dropdownpicker)，但无法滚动下拉列表中的内容。它只显示第一个结果。
我用zIndex尝试了很多东西，用flex: 1作为父视图，但我找不到解决方案。
是否可以在sectionlist中渲染，或者我是否应该寻找其他解决方案？
浏览 25提问于2021-09-15得票数 1
我有一个包含核心组件SectionList的React Native页面。SectionList具有粘性部分页眉(stickySectionHeadersEnabled)和列表页脚(ListFooterComponent)。当用户滚动经过最后一节时，最后一节页眉仍然停留在页面顶部，覆盖页脚。然而，我更希望粘性标题包含在小节列表区域的主体中，而不是停留在屏幕上超过最后一节的结尾。 有没有可能用SectionList来实现这一点，或者我应该采取另一种方法？ 展示这一行为的世博会小吃(仅限iOS和安卓) https://snack.expo.io/@unstableair/rn-sectionli
浏览 30提问于2020-04-16得票数 1
1回答
我们可以在SectionList中添加像这样的库的标签吗？我试过上面的库，它已经过时了，不能工作。谁能指导我如何在部分列表中将标题显示为选项卡？我在React网站上读到了Section的官方文档，它没有正式的这个功能。我在Github上找到了这个库，但我认为它不适用于最新的expo版本。我正在为我的react原生项目使用expo 36。
我的区段列表编码：
import React from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
SectionList,
} from 'rea
浏览 18提问于2020-03-13得票数 3
1回答
更新：I只是从一个区段列表切换到一个滚动视图，并且状态正确地更新了。我不明白Pure组件的原理，这也是它没有被重新复制的原因。
我对自然的反应很新，我用redux和诸如此类的方法解决了很多问题。但是，我似乎无法理解为什么当状态发生变化时，我的组件没有更新。我不确定需要多少信息，所以我将尝试将注释放在应该重点关注的代码中。
复选框是从api调用动态呈现的。然后，我使用该数据创建一个具有传递给复选框的真/假值的项的列表。列表中的键与每个复选框都具体相关联。我试图保持尽可能的动态，以允许后端数据的更改。当按下复选框时，复选调度按预期触发并更新状态，但复选框没有更新以反映该状态。打印checkedLi
浏览 1提问于2018-08-12得票数 0
1回答
每次用户点击特定的元素时，我都想显示一个描述用户所点击内容的调制解调器，我使用的是，并尝试使用可移植性，但我无法使modalize首先出现在tapbar上。
导航所在的App.js代码。
import React from "react";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import {
浏览 2提问于2020-10-16得票数 1
回答已采纳
我刚开始对本机做出反应，发现如果我在react native SectionList组件滚动之前使用renderSectionHeader道具，那么这种奇怪的行为就不起作用。
垂直滚动不工作
<SectionList
sections={DATA}
renderSectionHeader={({ section }) => (
<View style={styles.item}>
<Text style={styles.text}>{section.title}</Text>
浏览 5提问于2021-09-02得票数 0
我们已经使用React Native构建了一个应用程序，目前正在寻找测试云服务。
Xamarin看起来是个不错的选择，但是它能和React Native一起工作吗？
浏览 2提问于2017-03-21得票数 2
我建立了一个字母表洗涤器，它滚动一个SectionList。SectionList是通过使用getItemLayout进行优化的。如果我擦掉字母表，滚动就会按计划进行，但是直到我把手指从屏幕上释放出来之后，SectionList才会重新启动。
有人想办法解决这个问题吗？
浏览 5提问于2017-11-21得票数 10
回答已采纳
我在同一问题上发现了很多问题，但似乎没有一个问题能解决问题。目前，我正在使用redux来获取一个对象数组，操作该数据以匹配SectionList数据reqs，并将其提供给SectionList部分支柱。在RenderItem中，我使用FlatList并输入项目支持sections.data。最后，renderItem in FLatList是一个PureComponent。我尝试过使用shouldComponentUpdate，以及其他人推荐的许多其他支持，但似乎都没有用。SectionList一致地呈现项3次或更多次。这是我的密码：
// SECTION LIST COMPONENT
im
浏览 0提问于2019-06-11得票数 0
据我所知，在SectionList中只有contentContainerStyle和style prop用于容器样式，这两个属性都适用于SectionList中的所有内容。 我想对仅包装所有renderItem组件的容器应用一些样式，而不是像renderSectionHeader或renderSectionFooter这样的其他组件。我似乎找不到任何道具来设计它的样式。 基本上，我希望将一些阴影应用于包装每个部分的renderItems的一些视图，而不是单个项目。 有什么办法可以做到这一点吗？ ? 我想对红色容器应用样式。 谢谢!
浏览 22提问于2020-12-05得票数 1
我想使用SectionList来响应本机。
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: [
{
title: 'New List', data: []
},
{
浏览 5提问于2017-08-10得票数 0
回答已采纳
1回答
最近我开始在React-Native上工作，之前我曾经在React上工作过，因为我是新手，我正在努力处理许多需求，例如在两个列表之间拖放实际上在使用HTML/React时非常简单，但在React-Native中它是如此复杂，没有库来支持这个功能，我从来没有遇到过这样的困难，有没有一种方法可以在React-Native中使用任何React库，或者是否有人可以帮助我使用React-Native库，在那里我可以使用可拖动的Flatlist在彼此之间拖动，以及可以选择将其移动到另一个列表。
在过去的几周里，我一直在为这个需求而苦苦挣扎，我已经用谷歌搜索了很多。
也尝试了一些React-Native库，
浏览 15提问于2019-11-24得票数 0
回答已采纳
所以我想以一种非正统的方式使用RN部分列表。
我希望区段列表将渲染传递给组件，因为渲染不会非常均匀。
我想使用小节列表，这样当你滚动时，你仍然可以看到标题。
我制作了一个组件，它接受孩子并在节列表中呈现他们，如下所示：
class SomeSectionList extends Component {
render() {
let sections = React.Children.map(this.props.children, (Child, index) => {
return {title: Child.type.title, d
浏览 3提问于2019-04-03得票数 5
1回答
为什么我的随机颜色会被多次更新？通过生命周期事件控制此行为的正确方式是什么？
import React from 'react';
import { StyleSheet, Text, ScrollView, FlatList, SectionList, View, Button, SegmentedControlIOS } from 'react-native';
import contacts, {compareNames} from './contacts';
import {Constants} from 'expo'
浏览 0提问于2018-05-19得票数 1
0回答
我使用的是React Native的SectionList。发送到SectionList的数据如下所示
data: [
{
title: "Asia",
data: ["Taj Mahal", "Great Wall of China", "Petra"]
},
{
title: "South America",
data: ["Machu Picchu", "Christ the Redeemer", "
浏览 5提问于2018-07-09得票数 2
回答已采纳
2回答
如何映射此数组中的所有名称
、、、、
import React, { useState } from 'react';
import {View, StyleSheet, Button, FlatList, SectionList} from 'react-native';
import { Item, Input, Container, Header, List, ListItem, Text, Left, Right, Icon } from "native-base";
const NigLawList= ({navigation}) => {
const
浏览 15提问于2020-11-03得票数 0
回答已采纳
我需要访问有关react-native SectionList中renderItem中的节(索引、值)的信息。根据部分，可以通过renderItem函数传递详细信息。但在下面的代码中，除了该项之外，所有其他值都将被设置为未定义。有没有其他可能的方法呢？
render(){
return(
<SectionList
sections={this.props.itemList}
renderItem={(item,section) => thi
浏览 0提问于2017-10-06得票数 2
回答已采纳
问题：我有一个带有TextInput和SectionList的页面。当我专注于TextInput，然后单击SectionList中的ListItem -它只隐藏键盘，但不导航到SecondPage，它应该做onPress，如下所示。如果一个TextInput不聚焦-一切都很好。
想要的行为：在关注TextInput的同时，如果我单击ListItem -它应该导航我到SecondPage。
问题：
我的代码有问题吗?还是SectionList的正常行为？
有什么方法可以达到预期的行为吗？
代码：
SectionList + TextInput组件
const ds = [
浏览 4提问于2017-10-05得票数 0
我可以将一个新的UIViewController从react-native桥推送到Objective-C Native桥吗？我想从react-native运行原生屏幕。我不想在react-native组件中实现原生UI。
浏览 4提问于2020-02-03得票数 2
我有一个反应应用程序，我需要转换为反应本机。我没有太多的网站开发经验，所以我可能会在这里错过一些重要的东西。我的问题是，当我在模拟器中打开应用程序时，我只看到一个白色页面，上面写着“主页”。这就是我到目前为止所翻译的代码。
index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () =
浏览 0提问于2020-02-10得票数 4
我使用的是react本机的SectionList，无法隐藏数据集中空部分的节头。我只想显示节标题和不为空的节的行。
浏览 0提问于2018-11-28得票数 6
回答已采纳
我正在使用react本机循环来显示节头和数据。
我的预期产出如下：
> 0节
data1 data2
>第1节
data1 data2
>第2节
data1 data2
，它将根据循环号来循环该部分。
但是，实际输出如下：
它只显示最后一个循环值。
import React, { Component } from 'react';
import { Text, StyleSheet, View, SafeAreaView, SectionList } from 'react-native';
export defaul
浏览 5提问于2020-02-16得票数 0
回答已采纳
升级到react native 0.59.5后，应用程序在模拟器上发出以下警告消息：
viewPagerAndroid has been extracted from react-native core...
但是组件文件中没有导入viewPagerAndroid：
import React, { Component} from 'react';
import { SectionList, View, StyleSheet, Text, TouchableOpacity, Platform, AppRegistry } from 'react-native';
浏览 0提问于2019-03-20得票数 6
回答已采纳
1回答
我正在我的React Native项目中使用Redux，我想要一些转换数据以进行渲染的建议。我有一个我认为是规范化的userDetails对象，格式如下： "userDetails": Object {
"allIds": Array [
"111",
"222",
"333",
],
"byId": Object {
"111": Object {
"name": "B
浏览 19提问于2020-10-02得票数 1
回答已采纳
我使用reduce函数在react原生中创建group by查询，然后创建区段列表来显示数据，但我有一些问题。我的代码 <View>
<SectionList
renderSectionHeader={({ section: { title} }) => (
<Text style={{ fontWeight: 'bold' }}>{title}</Text>
)}
sections={this.state.dataSource}
renderItem={({item, index
浏览 28提问于2021-07-07得票数 0
回答已采纳
我刚刚将我的ListView更改为React Native的新SectionList，现在当我尝试使用scrollTo函数时，应用程序崩溃，声明它是未定义的。我试着寻找可能有帮助的新函数/替代函数，但它们似乎都不起作用。
使用新的SectionList以编程方式滚动到特定部分的适当协议是什么？
到目前为止我一直在咨询的链接：
我现在的尝试是：
var params = {animated:true,offset:Platform.OS == "ios" ? 244 : 264}
_mainListView.scrollToOffset(params)
浏览 0提问于2017-04-17得票数 13
我在控制台中收到以下错误
warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `SectionList`. See for more information.
in div (created by SectionList)
in SectionList (created by Sections)
in div (created by Sections)
in div
浏览 0提问于2017-10-16得票数 1
对于我正在处理的一个项目，我需要创建一个组件，用户可以在其中将条目添加到一个处于状态的数组，并创建一个SectionList来显示这些条目。另外，我需要SectionList在输入后立即向下滚动到最新的条目。
列表本身显示了添加新条目后的所有条目和更新，但是一旦列表中包含的条目超过了屏幕所能显示的数量，它就只能向下滚动到倒数第二个条目，我真的需要滚动到最后一个条目。
我尝试了很多方法，包括等待setState，定义contentContainerStyle，将整个东西转换成VirtualizedList和ScrollView，所有我能想到的东西，但我就是不能让它滚动到最后一个条目。
问题：如何
浏览 86提问于2019-06-01得票数 10
回答已采纳
有没有办法在滚动时知道React Native的SectionList中当前的第一行？我想根据活动部分更改另一个组件。
浏览 1提问于2018-01-03得票数 5
回答已采纳
1回答
如何将ArcGIS JS API与React native集成？我正在使用expo进行原生反应。我不想使用运行时SDK，而是使用react本机库或API来构建react本机小部件并与Mendix本机进行集成。 我的Android.manifest文件具有以下权限 <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
浏览 44提问于2020-06-10得票数 3
回答已采纳
使用SectionList时，即使调用renderItem，也不显示行。当在列表上触发滚动时，行会立即出现。
我在上发现了一个问题来讨论这个问题，但我没有找到任何解决方案来解决它。并且该问题已关闭并标记为已解决问题。
在上述问题中找到解决方案是通过将value设置为false来禁用SectionList中的removeClippedSubviews。我知道这不是解决方案，而是一个小把戏。随着列表的庞大，禁用removeClippedSubviews将是一个糟糕的解决方案，因为它不会优化列表视图的性能。
我已经寻找了很多小时，但没有任何解决方案来解决它。有什么建议来解决这个问题吗？
我有以下用处
浏览 1提问于2018-08-22得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
