为什么在一行中呈现字符串的sectionlist是原生的
在React Native中，SectionList是一个用于展示分组列表数据的组件。它可以将数据分组并按照每个分组的标题进行展示。在SectionList中，每个分组可以包含多个项目，并且每个项目都可以包含一个或多个数据项。
原生的SectionList是指使用React Native框架提供的原生组件来实现SectionList功能。相比于其他第三方库或组件，原生的SectionList具有以下优势：
- 性能优化：原生的SectionList通过与底层原生UI组件的交互，可以更好地利用设备的硬件加速功能，提高列表的渲染性能和响应速度。
- 稳定性和可靠性：原生的SectionList经过React Native团队的开发和测试，具有更高的稳定性和可靠性。它在各种设备和操作系统上都能够正常运行，并且可以与其他原生组件无缝集成。
- 兼容性：原生的SectionList可以与React Native的其他原生组件和API进行无缝集成，可以方便地使用各种原生功能和特性，提供更好的用户体验。
- 社区支持：作为React Native的核心组件之一，原生的SectionList得到了广大开发者社区的支持和维护。开发者可以通过查阅官方文档、参与社区讨论等方式获取帮助和解决问题。
应用场景： 原生的SectionList适用于需要展示分组列表数据的场景，例如通讯录、商品分类、新闻列表等。它可以方便地对数据进行分组和排序，并提供了丰富的自定义选项，可以满足不同场景下的需求。
推荐的腾讯云相关产品和产品介绍链接地址： 腾讯云提供了丰富的云计算产品和服务，其中与移动开发相关的产品包括云开发、移动推送、移动直播等。您可以通过以下链接了解更多信息：
- 云开发：腾讯云云开发是一款面向开发者的一体化后端云服务，提供了云函数、数据库、存储等功能，可以帮助开发者快速搭建和部署移动应用的后端服务。详情请参考：https://cloud.tencent.com/product/tcb
- 移动推送：腾讯云移动推送是一款高效、稳定的消息推送服务，可以帮助开发者实现消息的即时推送和个性化推送。详情请参考：https://cloud.tencent.com/product/tpns
- 移动直播：腾讯云移动直播是一款强大的直播服务，提供了高清、低延迟的直播推流和播放功能，可以帮助开发者快速构建直播应用。详情请参考：https://cloud.tencent.com/product/mlvb
请注意，以上推荐的产品仅为示例，您可以根据具体需求选择适合的腾讯云产品。
相关·内容
我试图使用SectionList打印对象的键/值对。但是，作为字符串的值是由renderItem逐个字符呈现的。
代码：
const mainObject = {
"key1": "val1",
"key2": ["val2.0","val2.1"],
"key3": "val3",
}
const renderItem = ({item}) => <Text>{item}</Text>
const sectionHeader = ({sect
浏览 0提问于2019-08-23得票数 0
回答已采纳
我知道SectionList默认将其头放在iOS中。但是，当SectionList被ScrollView包围时，不再使用粘性头。
我的基本结构是这样的。
<ScrollView>
<Text style={styles.paragraph}>...</Text>
<SectionList />
</ScrollView>
(而实时测试代码是 )
如果我删除了ScrollView和Text，那么粘贴头很好。但是我想在Image启动之前显示一个文本(或者View )。
有什么办法可以解决吗？
谢谢。
浏览 3提问于2017-08-01得票数 0
回答已采纳
对于我正在处理的一个项目，我需要创建一个组件，用户可以在其中将条目添加到一个处于状态的数组，并创建一个SectionList来显示这些条目。另外，我需要SectionList在输入后立即向下滚动到最新的条目。
列表本身显示了添加新条目后的所有条目和更新，但是一旦列表中包含的条目超过了屏幕所能显示的数量，它就只能向下滚动到倒数第二个条目，我真的需要滚动到最后一个条目。
我尝试了很多方法，包括等待setState，定义contentContainerStyle，将整个东西转换成VirtualizedList和ScrollView，所有我能想到的东西，但我就是不能让它滚动到最后一个条目。
问题：如何
浏览 86提问于2019-06-01得票数 10
回答已采纳
我在一个动画底部工作表组件中有一个SectionList，但是当这个组件嵌套在Android上时，它不会滚动。我怎样才能让它在iOS上表现得像它一样？
将SectionList作为支持子程序的父级底部工作表：
return (
<GestureDetector gesture={gesture}>
<AnimatedView style={animatedStyle}>
<Line />
<Title>{title}</Title>
<>{childr
浏览 20提问于2022-05-09得票数 1
我正在尝试从一个名为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
回答已采纳
我有一个垂直的RecyclerView，每个项目都有水平的RecyclerView。
当我更新RecyclerView UI时，冻结几秒钟。
更新代码:
public void setData(List<SectionList> data) {
if (this.sectionListDetails != data) {
this.sectionListDetails = data;
notifyDataSetChanged();
}
}
浏览 3提问于2017-08-03得票数 0
我在渲染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
3回答
使用CSV编写器，我试图将字符串列表写入文件。
每个字符串应该占据一个单独的行。
sectionlist = ["cat", "dog", "frog"]
当我实现以下代码时：
with open('pdftable.csv', 'wt') as csvfile:
writer = csv.writer(csvfile, delimiter=',')
for i in sectionlist:
writer.writerow(i)
我创造
c,
浏览 3提问于2014-09-29得票数 1
回答已采纳
据我所知，在SectionList中只有contentContainerStyle和style prop用于容器样式，这两个属性都适用于SectionList中的所有内容。 我想对仅包装所有renderItem组件的容器应用一些样式，而不是像renderSectionHeader或renderSectionFooter这样的其他组件。我似乎找不到任何道具来设计它的样式。 基本上，我希望将一些阴影应用于包装每个部分的renderItems的一些视图，而不是单个项目。 有什么办法可以做到这一点吗？ ? 我想对红色容器应用样式。 谢谢!
浏览 22提问于2020-12-05得票数 1
我建立了一个字母表洗涤器，它滚动一个SectionList。SectionList是通过使用getItemLayout进行优化的。如果我擦掉字母表，滚动就会按计划进行，但是直到我把手指从屏幕上释放出来之后，SectionList才会重新启动。
有人想办法解决这个问题吗？
浏览 5提问于2017-11-21得票数 10
回答已采纳
JSON结构：
sectionItems={key: ..., name: .., title: ..listOf 20 nested data }
data =
{
"sections": [...sectionItems of 50 items]
}
When displaying in the FlatList its rendering too slow,
<FlatList
renderItem={({item}) => <Section item={item} />}
initialNumToRender={l
浏览 0提问于2019-01-12得票数 0
1回答
我使用来渲染多个具有不同区段标题的区段。我在以我想要的方式显示它时遇到了一些麻烦。我想有我的标题在顶部和它下面，项目的一节作为一个网格。
使用以下代码：
<SectionList
contentContainerStyle={styles.sectionListContainer}
renderItem={this.renderItem}
keyExtractor={this.getKey}
renderSectionHeader={this.renderSectionHeader}
shouldItemU
浏览 5提问于2017-04-12得票数 8
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
回答已采纳
如何在React Native中使用SectionList中的复选框进行选中或取消选中。而不使用第三方模块。
浏览 0提问于2018-04-28得票数 0
根据FB文档，你可以在react原生的SectionList中覆盖renderItem默认的基于项目的渲染来使用基于节的渲染，但我还没有找到这样做的方法。请帮帮忙。
浏览 0提问于2021-05-25得票数 2
3回答
在C#中：
List<List<Point>> SectionList = new List<List<Point>>();
SectionList包含点列表，每个子列表包含的点数各不相同。
我想弄明白的是，如何按子列表的数量降序对SectionList进行排序。
因此，如果SectionList有3个点列表，排序后，SectionList将包含所有3个列表中的最高计数值。
谢谢，神话
浏览 0提问于2012-09-06得票数 5
回答已采纳
我在控制台中收到以下错误
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
我目前在我的一个组件中有一个部分列表。代码如下：
<code>A0</code>
正在从<code>D1</code>拉取数据
<code>A2</code>
这就是我创建数据源的方式。渲染后，它的显示如下所示：
<code>B3</code>
列表在它自己的行上呈现每个元素的方式都有它自己的单独的TouchableOpacity。我想要的是整个数据块都是它自己的不透明度。对于包装在TouchableOpacity中的SectionList数据，这是可能的吗？
浏览 8提问于2019-08-21得票数 0
回答已采纳
我有一个带有3层的java对象。
该方案有几个部分：
public class Scenario {
private String scenarioId;
private List<Section> sectionList;
在每个部分中，有几个标签：
public class Section {
private String sectionName;
private List<String> labelList;
我希望将3层数据组装成一个字符串，例如：
<Scenario>
<section1>
<label11 da
浏览 3提问于2017-02-21得票数 0
回答已采纳
我有一个Section域对象，看起来像这样：
class Section {
String name;
Section parent;
int level = 0;
Boolean isRoot = false;
static hasMany = [children:Section]
static mappedBy = [children:'parent']
....
def Boolean isLeaf(){
retu
浏览 0提问于2013-02-14得票数 0
因此，我有一个从用户联系人中提取数据的SectionList。就在它的旁边是一张字母表，上面有他们的联系人的第一个字母。当他们点击一个字母，它意味着滚动，并将他们带到该部分。就像原生Iphone联系人屏幕的工作原理一样。
我的问题是，用户可能有很多联系人，所以我不能设置一个initialNumToRender。如果用户有一堆联系人，他们点击Z，它还没有呈现，我得到了一个错误，我必须使用onScrollToIndexFailed或getItemLayout。但我不知道如何使用这些属性中的任何一个滚动到我需要它的地方。这是组件
<View style={containerStyle}>
浏览 10提问于2022-08-10得票数 0
1回答
我正在尝试用一些数据创建动态SectionList。我为我的问题创建了一个示例代码，这是我的数据：
const DATAS = [
(DATA1 = [
{
title: "A",
data: ["X", "Y", "Z"],
},
{
title: "B",
data: ["F", "O", "F"],
},
]),
(DATA2 = [
{
titl
浏览 0提问于2020-12-24得票数 1
如何进行转换： public class Person
{
public string Name{ get; set; }
public string Age{ get; set; }
}
public class SectionList
{
public List<Person> PersonList { get; set; }
public string SectionName { get; set; }
}
public static List<SectionL
浏览 25提问于2021-01-31得票数 0
我使用的是片段和视图模型，当从我的片段中调用函数时，viemodel中的列表值不会更新。
这在我的片段中
class SettingsFragment : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val binding = FragmentSettingsBinding.inflate(inflater)
val application = requireNotNul
浏览 27提问于2020-11-14得票数 0
回答已采纳
在visual studio中，可以在“局部变量”窗口中编辑某些字段的值，也可以将鼠标悬停在这些字段上：
但是，这不适用于替换私有字段的列表(在本例中，当我在_sectionList上单击时，Edit value选项是灰色的)。
是否可以在visual studio调试器中设置个人分发列表字段的值？
特别是，我想用sectionList2替换_sectionList。
浏览 0提问于2018-08-03得票数 3
1回答
我是比较新的React和React native，但我在填充SectionList时遇到了一个问题，还找不到解决方案。
我有一个对象数组，每个对象都有自己的数组。数据是显示此信息的理想选择，然而，每个部分的数组并不称为“SectionList”，而SectionList似乎期望每个部分中的数组具有关键的“数据”。
有没有办法告诉SectionList使用另一个键而不是数据键来填充每个部分的数组？
浏览 9提问于2018-07-24得票数 5
3回答
我需要创建以下界面：
有一个父SectionList，其中包含元素的各个部分。
这些部分中的一个包含垂直FlatList。
我希望SectionList严格按节垂直滚动(例如通过scrollToLocation)，而垂直FlatList应该在自身内自由滚动，并且独立于SectionList滚动。
下面是一个原理图，这应该是如何在视觉上。
也许您不需要使用SectionList或FlatList来解决这个问题，这就是我对如何实现这个问题的设想。谁有办法解决这个问题？
更新：
我在中创建了一个代码示例。我还不能解决的问题：
如何严格按节使SectionList滚动。
浏览 24提问于2022-03-23得票数 2
我想在我的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
回答已采纳
我正在实现一个显示需要滚动到当前周的周列表的SectionList，因此我使用initialScrollIndex。
我面临的问题是，我并不真正理解_getItemLayout的索引是什么？有时是data[index] === undefined，这对我来说没什么意义。
我需要知道它是哪个部分(data[?])，因为每个部分都包含该周事件的另一个SectionList，因此高度不是常量。
_getItemLayout = (data, index) => {
const rows = (data[index] === undefined) ? 1 : data[index].data
浏览 1提问于2017-07-07得票数 6
当我加载我的组件时，onEndReached会在我滚动<SectionList />之前触发一次，但当我滚动到底部时，onEndReached不会再被触发。 下面是我的代码： render (
return (
<View style={{ flex: 1 }}>
<SectionList
style={{ backgroundColor: 'pink' }}
refreshControl={
<RefreshControl
refreshi
浏览 44提问于2020-10-24得票数 1
回答已采纳
我现在有一个SectionList。我想将所有项目包装在FlatList中的一个部分中。例如，对于Queues Near You部分，Tonkotsu、Burgerville和Fries的三个RestaurantCards应该在一个水平的FlatList中，Restaraunt、B、C应该在它自己的FlatList中，等等。我如何实现这一点？
const sectionData = [
{
title: "Queues Near You",
data: ["Tonkotsu", "BurgerVille", "Frie
浏览 12提问于2022-10-20得票数 0
1回答
这是根据kml显示地图的以下代码。
var myLatLng = new google.maps.LatLng(41.875696, -87.624207);
var mapOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.K
浏览 0提问于2013-02-02得票数 1
回答已采纳
2回答
我在使用modelmap属性时遇到了问题。这是我的xyz.jsp文件..
<select name="list">
<option value="-">Choose a Value</option>
<c:forEach items="${sectionList}" var="section">
<option value="${section.code}">${section.description}</option>
浏览 0提问于2011-08-07得票数 1
1回答
有没有人有更详细的SectionLists异构渲染示例？
<SectionList
sections={[ // heterogeneous rendering between sections
{data: [...], key: ..., renderItem: ...},
{data: [...], key: ..., renderItem: ...},
{data: [...], key: ..., renderItem: ...},
]}
/>
非常感谢您的帮助！
浏览 6提问于2017-06-27得票数 4
我是新的反应-本地人，目前正在进行一个项目，显示照片和相关的信息。该项目使用标准SectionList(RN0.55)。
问题是，每次添加照片时，列表中的所有子组件都将被重新呈现。我注意到，当名单增长到50左右时，会有一个明显的减速。
我有以下设置：
我有一个redux存储，其中包含Data(基本上是照片信息的包装器)，每次用户做一些操作时，Data都会被复制、修改，然后重新分配回redux存储。
然后我有一个类似于下面的类来呈现SectionList
class PhotoList extends PureComponent {
render() {
&
浏览 0提问于2019-06-14得票数 1
在实现SectionIndexer的ArrayAdapter中，有一些代码可以检查以相同首字母开头的列表项--这样就可以对其进行合并。
如下所示：
alphaIndexer = new HashMap<String, Integer>();
int size = objects.length;
for (int i = 0; i < size; i++) {
// Log.d("ObjectLength", String.valueOf(objects.length));
ItemObject i
浏览 2提问于2012-08-27得票数 1
回答已采纳
您知道如何使sectionList组件中的水平部分(特定部分)反应本地的吗？我想使第二部分水平，我尝试修改项目风格在renderItem与flexDirection: 1和flexDirection：‘行’，但不工作。有谁知道我如何在剖面上设置自定义样式或制作水平部分？(红色圆圈)
<View>
<SectionList
renderItem={({item, index, section}) => <CellMainNews isFirst={index===0 ? true: false} data={ it
浏览 2提问于2018-05-24得票数 5
回答已采纳
1回答
所以我有一个最近的呼叫页面。我想把我最近的电话按日期分开(格式是MMMM DD，YYYY)，但它没有正确显示。虽然最后三个条目是:12月16日、2013年12月16日、2013年12月16日和2013年12月13日，但我只得到了第一个日期，即2013年12月17日。
以下是我的代码：
boolean needSeparator = false;
final int position = cursor.getPosition();
if(this.dateIndexer == null)
this.dateIndexer = new LinkedHashMap<String
浏览 2提问于2013-12-20得票数 1
回答已采纳
我在SectionList中使用SectionList，但是我的行重复多次。我将数据存储在两个状态中，并在SectionList和FlatList中获取它的值。请帮帮我。谢谢。
<SectionList
ItemSeparatorComponent={FlatListItemSeparator}
sections={[
{ title: 'Dishes', data: cates },
{ title: '
浏览 3提问于2021-06-30得票数 0
回答已采纳
我使用JAXB (Java for XML绑定)将Java对象转换为XML文件
JAXBContext context = JAXBContext.newInstance(MetaListWrapper.class);
Marshaller m = context.createMarshaller();
m.setProperty(Marshaller.JAXB_FORMATTED_OUTPUT, true);
// Wrapping my data.
MetaListWrapper wrapper = new MetaLis
浏览 2提问于2016-12-12得票数 0
回答已采纳
我正在开发一个Android应用程序，在这个应用程序中，我有一个以静态方式设置的部分图像。现在，为了进行测试，我在框架内使用了GridView。但是当我这样做的时候，我无法正确地看到字母，因为我认为它们是从屏幕上消失的，并且这部分的文字不再可见。我不知道我做错了什么。任何帮助都会很好。
activity_group_section.xml：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/ap
浏览 2提问于2015-08-12得票数 1
回答已采纳
当我试图修改dataset背后的SQL时，我被Microsoft的一个非常有用的错误消息弄糊涂了。原始SQL为
Select * from Denormalized_V
where (@Instructor = '<ALL>' and [Section Code] in (@SectionList)) or
(@Instructor <> '<ALL>' and [Section code] in (@SectionList) and [Instructor Name] Like @Instructor)
浏览 2提问于2014-04-25得票数 0
1回答
我在Firebase和Kotlin for循环方面有一些问题。
请参见下面的场景。
I有一所学校的类列表(已经在另一个来源的变量中)，在Firebase实时数据库中，每个类都有几个部分，我想从数据库中获取类列表的所有部分，最后，我想将节列表显示为对话框
下面是一个示例代码
private val firebaseDB = Firebase.database.reference
private val clazzList: ArrayList<Clazz> = ArrayList()
private fun getSections() {
val sectionList:
浏览 2提问于2020-03-30得票数 0
我在想我是不是做了件很愚蠢的事...很明显我漏掉了什么。我已经习惯了定义自定义类的属性的模式，但是我似乎遇到了扩展类不能识别新属性的问题。举个例子，下面是我的头文件：
#import <UIKit/UIKit.h>
#import "MyTableViewController.h"
@interface MyRootController : MyTableViewController {
NSMutableArray *sectionList;
}
@property (nonatomic, retain) NSMutableArray *section
浏览 1提问于2010-05-25得票数 0
回答已采纳
请参阅
当其中一个部分为空时(e.a.数据属性是一个空数组)，我仍然希望呈现SectionHeader，但也呈现一个指示该部分不包含任何数据的组件。
我知道对于FlatList组件，使用ListEmptyComponent属性可以做到这一点，但是对于SectionList组件，这是如何工作的呢？
我希望有这样的东西(但它不起作用)：
<SectionList
style={styles.container}
renderSectionHeader={({section}) => <SectionHeader title={section.title} />
浏览 0提问于2017-09-29得票数 14
基本上，我想使用方法的，但我不能设法在一个功能组件内设置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
回答已采纳
我有一个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
1回答
“使用新的FlatList或SectionList组件。除了简化API之外，新列表组件还具有显著的性能增强，主要是对任意多行的内存使用几乎保持不变。”
这一点在“反应土著人”的官方文件中有说明。然而，无论我如何努力，FlatList内存的使用只是保持天空飞升时，向下滚动。与使用内存较少的ListView组件相比。
浏览 5提问于2017-08-28得票数 7
回答已采纳
3回答
目前，我正试图在经典的<SectionList>中使用<View>，我的所有数据都是格式化的，列表显示正确，我的项目的操作也正常。
问题是，当我在我的SectionList顶部时，可以触发滚动的区域实际上很小(大约是列表顶部的100个像素)。但是，一旦我从该区域向下滚动，整个列表就可以滚动，并按预期工作，直到我滚动回顶部。
我的父视图有flex: 1和SectionList
环境
工作环境: MacOS塞拉利昂10.13.3
世博版: 23.0
React本地版本: 0.50
反应: 16.0
使用IPhone 8仿真
Android没有问题
复制的步骤
视图内部Sec
浏览 1提问于2018-03-30得票数 2
我在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
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
