如何使React Native Flatlist中的第一列粘滞？
React Native FlatList中的第一列粘滞可以通过使用stickyHeadersEnabled属性来实现。将stickyHeadersEnabled属性设置为true，可以使得FlatList中的头部组件在滚动时保持粘滞。
以下是一个示例代码：
import React from 'react';
import { FlatList, View, Text } from 'react-native';
const data = [
{ id: '1', title: 'Item 1' },
{ id: '2', title: 'Item 2' },
{ id: '3', title: 'Item 3' },
// ...
];
const renderItem = ({ item }) => (
<View style={{ padding: 16 }}>
<Text>{item.title}</Text>
</View>
);
const keyExtractor = (item) => item.id;
const App = () => {
return (
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={keyExtractor}
stickyHeadersEnabled={true} // 设置为true，使头部组件粘滞
/>
);
};
export default App;在上述示例中，我们创建了一个FlatList组件，并将stickyHeadersEnabled属性设置为true。这将使得头部组件在滚动时保持在屏幕顶部，实现粘滞效果。
推荐的腾讯云相关产品：腾讯云移动应用托管（Mobile Application Hosting），提供了一站式的移动应用托管服务，支持React Native等多种移动应用开发框架。您可以通过以下链接了解更多信息：腾讯云移动应用托管。
相关·内容
2回答
反应，渲染不同的组件并保持滚动位置。
reactjs、react-native
假设你有一个水平平面图。
当用户单击项目中的按钮时，您希望呈现一个与您所拥有的平面列表项不同的视图。
假设您实现它，如下所示
{showDetail ? (
<DetailView onPress={toggleShowDetail} />
) : (
<FlatList
data={data}
renderItem={() => (
<View>
<Button onPress={toggleShowDetail} /&
浏览 5提问于2020-07-01得票数 0
1回答
如何将Fetch转换为Axios和Class组件为功能组件？
react-native、axios、fetch、react-functional-component
如何将Fetch转换为Axios和Class组件为功能组件？
我想学习如何在React本机中使用函数组件和axios来实现无限滚动，但是由于参考文档是由类组件和获取组成的，所以很难应用。
import React from 'react';
import {
View,
Image,
Text,
FlatList, // here
} from 'react-native';
export default class App extends React.Component {
state = {
data: [],
p
浏览 1提问于2021-05-30得票数 0
回答已采纳
1回答
React本机FlatList拒绝呈现内容
reactjs、react-native
我在FlatList上读过几十个线程，似乎无法让它工作。这是非常基本的，所以我一定是错过了一些基本的东西。为什么这会返回一个空白屏幕？
import React from "react";
import { View, Text, FlatList } from "react-native";
export default function App() {
const renderItem = ({ item }) => {
console.log(item);
return (
<View>
浏览 3提问于2022-08-01得票数 0
回答已采纳
3回答
如何在React Native中从子组件回调到父组件
javascript、react-native、callback、react-native-flatlist、react-native-component
我一直在使用react-native来获取从子对象到父对象的回调。下面是我的实现的代码片段： MainView.js import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Image,
TouchableHighlight,
FlatList,
Dimensions,
} from 'react-native';
import ListCell from './ListCell';
import
浏览 12提问于2019-02-15得票数 1
回答已采纳
1回答
React Native -无法理解FlatList extraData prop的用途
javascript、reactjs、react-native
据我所知，FlatList extraData属性用于在组件发生更改时重新呈现组件。
所以，想象一下这个例子：
import React from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';
export default function App() {
const [selectedId, setSelectedId] = React.useState(null);
const items = [
{
id: &#
浏览 3提问于2021-11-11得票数 1
1回答
当打开sidemenu时，Flatlist ().current为空
reactjs、react-native、react-native-flatlist
我使用Reactinative并使用组件ref构建了一个自动生成的Flatlist来访问scrollToIndex方法。
所有操作都很好，直到我打开SideMenu，这会导致flatList.current变为null，从而导致应用程序错误。
我想知道有没有人知道为什么会发生这种事？感谢你的帮助。谢谢
App.js
import React, {useState} from 'react';
import { StyleSheet, Text, Image, View, SafeAreaView, ScrollView } from 'react-native'
浏览 3提问于2022-01-08得票数 0
回答已采纳
2回答
FlatList中的文本在安卓系统上不可选
react-native、react-native-android
我刚刚把我的应用程序从React Native 0.58.5升级到0.61.2，现在我不能在安卓系统的FlatList中选择文本。
我尝试在React Native 58.5的Text组件中设置selectable = {true}，它工作得很好，可以复制文本中的内容。但是在将React Native版本从0.58.5升级到0.61.2之后，无法选择用于在Android 9.0中复制/粘贴内容的文本。实际上，它可以在Android 5.0上工作，但不能在Android 9.0上工作
export default class App extends React.Component {
_re
浏览 2提问于2019-10-27得票数 4
2回答
为什么react钩子不支持纯组件或shouldComponentUpdate函数？
reactjs、react-native、react-hooks
我想实现flatlist的多选功能。我直接在官方网站上修改了这个例子。官方网站地址是：。因为列表中有很多项，所以我想使用shouldComponentUpdate来防止过度呈现项。但是我发现react钩子编写方法不能实现多选，它不能保存选中的状态，但是类编写方法可以实现多选，原因是什么？FlatList项目的源码如下：
import {StyleSheet, Text, TouchableOpacity} from 'react-native';
import React, {Component} from 'react';
class Item ex
浏览 1提问于2020-06-17得票数 0
1回答
为什么不在react本机中调用api时显示文本？
javascript、react-native
调用api时只返回红色背景，而不返回文本，我希望api返回应用程序界面上显示的电影列表。
但是当我直接在render函数中返回Item函数时，它会返回文本，但是当我在外部调用函数时，它只是返回文本，而只是返回背景。
import React, {useEffect, useState} from 'react';
import {ActivityIndicator, FlatList, Text, View} from 'react-native';
import Axios from 'axios';
export default App =
浏览 7提问于2022-10-03得票数 1
5回答
在FlatList中隐藏滚动条()
react-native、react-native-flatlist
我正在尝试在我的应用程序中使用FlatList (React原生的)。我使用它的水平和可以看到滚动条。ScrollView中有一个选项可以隐藏滚动条，但在FlatList中没有。有没有人能用其他方式把它藏起来。我尝试使用父&子容器()的解决方案，但没有工作。
import React, { Component } from 'react';
import { Text, View, FlatList, StyleSheet, ScrollView } from 'react-native';
import { Card, Button } from &#
浏览 16提问于2017-05-15得票数 121
回答已采纳
1回答
如何在react原生中使用Flatlist实现多选？
javascript、react-native、ecmascript-6、react-redux
我正在尝试创建一个带有文本的平面列表，但它只选择了一个值，但我想从列表中选择多个值。而且我还需要为选定的项目更改颜色。这里我正在从api中获取数据。下面是我的代码： import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { FlatList } from "react-native";
import {
stepDone,
setInputData,
} fr
浏览 14提问于2019-02-01得票数 0
1回答
如何在切换到另一个选项卡时停止滚动滑动？
javascript、react-native、react-native-animatable、react-native-tab-view
环境：
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.2",
"react-native-reanimated": "^1.4.0",
"react-native-tab-view": "^2.11.0"
问题：
如何在切换到另一个选项卡时停止滚动滑动？
示例：
当我滚动内容并从屏幕上移除手指时，内容继续滚动，即幻灯片
浏览 3提问于2019-12-06得票数 3
1回答
如何在FLatList react native中实现Sraech bar
javascript、reactjs、react-native、ecmascript-6
我正在尝试在FlatList中添加搜索栏，这里是从API中获取数据并填充到FlatList中，但我必须过滤该列表，因为它可能包含许多数据。所以请帮帮我。我已经尝试了几个例子，但得到了错误，所以有时什么都没有发生.Please查看并帮助 import React, { Component } from 'react';
import { View, Text, TextInput,
FooterTab,Button,TouchableOpacity, ScrollView, StyleSheet,
ActivityIndicator ,Head
浏览 6提问于2019-02-25得票数 0
回答已采纳
2回答
从fetch导出JSON
react-native
我正在导出从获取的JSON。我知道我有一个绑定问题，但我不完全确定如何继续将我的函数绑定到当前组件。我在这个URL 上有一个快速的例子。
app.js
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
import { getMovies } from './utility.js';
export default class FetchExample extends R
浏览 2提问于2018-12-11得票数 1
回答已采纳
2回答
如何在React Native中调用绑定到扁平列表不同组件的函数
javascript、reactjs、react-native
我正在用React Native创建一个聊天应用程序，它接收不同的“消息类型”作为响应。其中一个包含一个按钮数组，我目前正在组件"ChatQuickReply“中的Flatlist中呈现这些按钮，如下所示： import React from "react";
import {
StyleSheet,
FlatList,
View,
TouchableOpacity,
Text
} from "react-native";
class ChatQuickReply extends React.Component {
const
浏览 28提问于2019-04-10得票数 2
回答已采纳
1回答
如何嵌套多个滚动视图？
javascript、react-native
我正在用React native开发一个应用程序。我需要使用多个滚动视图。但是滚动只对整个页面有效。另一些则在滚动时不起作用。我的英语不好，请原谅。有没有人能帮我这个忙？从现在开始谢谢你。 样本行代码； <ScrollView>
<View style={{ alignItems: 'center' }}>
<View style={styles.userRanking}>
{
(users.length > 0)
浏览 14提问于2019-07-03得票数 0
1回答
反应本机列表用户不工作
react-native、expo
我想我应该避免重蹈覆辙。那么，为什么这个代码不起作用呢？
RenderItem不是一个函数。
import React, { memo, useMemo } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, TouchableOpacity, Image, Dimensions } from 'react-native';
const Shopping_cart = ({ datas, onPressSetting }) => {
const RenderItem
浏览 6提问于2021-08-16得票数 0
回答已采纳
3回答
具有不同高度项目的水平FlatList React Native
react-native、layout、react-native-flatlist
我对react native中的FlatList组件有一点小问题。FlatList中的项目具有不同的高度。下面是我所拥有的一个小示例：
第一个问题是所有项目都位于顶部。我想把所有的东西都放在底部。
第二个问题是FlatList的高度总是最大项的高度。所以你也可以滚动到一个小项目的白色区域中的另一个项目...
下面是我的代码：
import React from "react";
import {
Text,
View,
Dimensions,
StyleSheet,
ListView,
TouchableOpacity,
浏览 1提问于2017-12-03得票数 0
1回答
反应本机元素listItem.accordion
javascript、react-native、react-native-elements
//我在FLatlist的帮助下呈现API响应，但当我按下展开选项时，它将打开所有手风琴.
import { View, Text, StyleSheet, FlatList } from 'react-native'
import React, { useState } from 'react'
import SearchBox from '../../components/SearchBox/SearchBox'
import { ListItem, Icon, Slider } from '@rneui/themed'
im
浏览 13提问于2022-08-05得票数 0
1回答
FlatList内部SectionList
react-native、react-native-flatlist、react-native-sectionlist
我有3个不同列表的屏幕，所有列表都有一些自定义的页眉/页脚，列表包含大量数据，所以我的问题是-- FlatList在SectionList中是否存在性能问题？
这是我想做的一个粗略的例子。
const App = () => {
const renderItem = ({item, section, index}) => {
switch (section.type) {
case 'LIST_1':
return (
<View>
<Text>Some cu
浏览 8提问于2022-06-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
