当FlatList为true时，百分比不适用于水平渲染项
当FlatList的属性horizontal为true时，百分比不适用于水平渲染项。
FlatList是React Native中的一个组件，用于高效地渲染大量数据列表。它可以在垂直或水平方向上滚动，并且可以根据需要动态加载和卸载列表项，以提高性能。
当我们将FlatList的属性horizontal设置为true时，列表项将水平排列，而不是默认的垂直排列。在这种情况下，百分比布局不适用于水平渲染项。
百分比布局是一种常用的布局方式，可以根据容器的宽度或高度的百分比来确定子元素的大小和位置。在垂直渲染项中，我们可以使用百分比布局来设置每个列表项的高度，以适应不同屏幕尺寸。但是，在水平渲染项中，由于宽度是固定的，无法根据百分比来确定子元素的大小和位置。
因此，当FlatList的属性horizontal为true时，我们应该使用其他布局方式来确定水平渲染项的大小和位置，例如使用固定宽度、自适应宽度或者使用Flex布局等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai_services
- 物联网（IoT）：https://cloud.tencent.com/product/iot_explorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc
相关·内容
我想在horizontal FlatList的render项上使用屏幕的宽度。然而，它并没有像预期的那样工作。当horizontal为false时，百分比值有效。但是当horizontal为true时，百分比值不起作用。</View> };
return (
<View style={styles.cont
浏览 4提问于2018-01-27得票数 7
回答已采纳
我有一个具有水平视图的Flatlist，它将在单行中加载一些项。我使用columnWrapperStyle工具来设置Flatlist容器，但是它提供了一个error，如下所示：这是我的code： <FlatList
columnWrapperStyle={styles.flatListHomeCon
浏览 0提问于2018-07-11得票数 0
回答已采纳
我最近开始使用react-native，并且偶然发现了FlatList组件。在使用react时，我总是使用带数组的map。我使用的是FlatList，但当我想要更改FlatList中项目的flex-direction时出现了问题，所以我又使用了map。{ <UsersImage key={ image } source={{ uri: image }} /> })FlatList&
浏览 2提问于2018-01-05得票数 19
回答已采纳
我想实现flatlist的多选功能。我直接在官方网站上修改了这个例子。官方网站地址是：。因为列表中有很多项，所以我想使用shouldComponentUpdate来防止过度呈现项。FlatList项目的源码如下：import React, {export default Item; import React, {Component} from &#x
浏览 1提问于2020-06-17得票数 0
我在react-native的FlatList上添加滚动/跳转到某些索引功能时遇到了麻烦。我的FlatList项的大小(高度)各不相同，这使得我无法实现getItemLayout，因为这需要我事先了解FlatList项的大小，因此我不能使用scrollToIndex (这需要实现getItemLayout我的临时解决方案是将initialNumberToRender调整为接近数据数量，并将windowSize属性设置得尽可能高，以便渲染所有项
浏览 5提问于2019-08-13得票数 13
回答已采纳
当将水平FlatList与其他垂直FlatList作为项使用时，似乎存在刷新的问题。当在垂直列表上启用刷新，而在水平容器列表上没有启用刷新时，就会发生这种情况。在iOS工作
<FlatList
hori
浏览 6提问于2017-04-12得票数 2
我正在努力优化我的<FlatList />组件，下面是我的示例代码：
(只更改案例1链接中的第17行)这可能会导致一个大清单的沉重负荷。
案例1:有没有办法让<FlatList />不与extraDa
浏览 2提问于2021-02-04得票数 0
回答已采纳
3回答
这很好，，但是当有更多的可用空间时，我希望FlatList项能够增长。Item key={1} style={{ flexGrow: 1 }} /></ScrollView>
但是，它不适用于FlatList items增长以填充可用的FlatList高度的内容。我需要使用FlatList
浏览 2提问于2021-03-20得票数 9
我正在使用FlatList来呈现一个列表。通过使用pagingEnabled={true}和渲染占据父级全部大小的单元格，我已经配置为一次只显示一行。当组件加载时，我在renderItem中看到数据数组中的每一项都有一条日志语句，这意味着每个单元格都得到了预呈现。
结果是延迟加载组件。单元格不应该只按照windowSize指定的数量进行渲染吗？
浏览 1提问于2017-06-29得票数 4
是否有可能防止键盘在滚动FlatList时被丢弃？当使用ScrollView时，将道具"keyboardDismissMode“设置为"none”是解决此问题的方法，但是在FlatList中，这并不适用于我.我在一个自制的组件(即中)中使用FlatList，而它的头中有一个焦点化的TextInput。我将FlatList呈现如下：
浏览 2提问于2018-06-22得票数 3
回答已采纳
2回答
这里是我想要实现的目标的屏幕截图：
所以我的目标是用原始比率渲染视频。<FlatList
浏览 14提问于2022-07-04得票数 0
回答已采纳
3回答
在过去的几天里，我一直在与我创建的FlatList inside应用程序的性能问题作斗争。我试图弄清楚的是JS呈现组件和实际显示在屏幕上的组件之间发生了什么，因为设备在这段时间内一直没有响应。每个触摸事件都会被注册，但只有当列表最终出现在屏幕上时才
浏览 0提问于2018-02-06得票数 5
在我的React Native应用程序中，我有一个简单的FlatList。Flatlist的呈现项是一个组件"SearchItem.js“
每次调用我的组件时，我都需要在这个组件内重新初始化一个状态。在这里，每次调用组件时，状态"arrowClicked“都需要为false。如果我们单击箭头图标并展开消息，状态将变为"true“。如何在每次调用组件时将状态重新初始化为"false“。当组件再次被调用时，它应该会自
浏览 0提问于2020-05-28得票数 0
我在tvOS环境中使用组件FlatList处理水平列表。问题出现在3个元素的小列表上，我将initialScrollIndex设置为第二个或最后一个元素，选择了好的项目。但是，当我尝试返回上一项时，出现了选择，但没有滚动。<FlatList length: 300, index,_keyExtractor}
horizontal={t
浏览 1提问于2018-07-27得票数 0
它们位于彼此下方，但我希望它们垂直和水平居中。我已经得到它的水平，但无论我做什么....我不能让它垂直居中(所以在屏幕的中间)。下面是我的代码：
<?
浏览 78提问于2019-05-10得票数 0
回答已采纳
1回答
我创建了一个页面，其中我使用了一个FlatList。这个FlatList使用我制作的一个项组件，当按下状态“隐藏”为false时，该组件会在自身下面显示另一个视图。我遇到的主要问题是，当按下某一项时，我无法找到将“隐藏”状态更改为true的方法，因此始终只保留一个显示附加视图的项目。同时，当我刷新/重新呈现我的FlatList时，它不会将所有“隐藏”状态设置为</
浏览 0提问于2019-03-05得票数 1
回答已采纳
我已经用Flatlist制作了一个图像网格。我正在从网络上加载图像。目前，我一导航到那个特定的页面，所有的图像都会被加载。我想要的是只加载那些在屏幕上可见的图像，并在滚动上休息。是否可以在Flatlist中加载卷轴上的图像？
浏览 1提问于2017-11-10得票数 5
我在使用FlatList时有两个问题(这两个问题都适用于ListView)。我有一个列表，它通过显示属性显示每个项，然后在我的FlatList中签入，如下所示： ref='flatList' renderItem={({item}) => item.display && <Text>{item.text
浏览 6提问于2017-06-07得票数 4
回答已采纳
我遵循本教程，，当我向下滚动，它发送请求，然后它被困在一个循环中，只有请求和请求。我认为这是列表视图中的滚动视图的一个问题。
浏览 7提问于2017-09-24得票数 10
在添加新项时，我使用了来自另一个所以问题的一些代码，以使FlatList保持在底部，如下所示 data={messages} onContentSizeChange={(contentWidth, contentHeight)=>{ }}
问题是，当初始列表呈现(目前只有35个
浏览 2提问于2018-08-21得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
