草庐IT

Flatlist

全部标签

javascript - 排序 react native FlatList

如何按字母顺序对FlatList进行排序?exportdefaultfunctionPartnersList(props){const{partners,onPartnerDetails}=props;return((... 最佳答案 排序partners就可以了:exportdefaultfunctionPartnersList(props){const{partners,onPartnerDetails}=props;return(a.localeCompare(b))}renderItem={({item})=>(...如果p

javascript - 如何从 native react 中的 FlatList 中删除项目/索引?

我有一个呈现为View的数据,遇到了一个关于如何删除被刷过的特定索引的问题我按如下方式使用了FlatListrender(){this.leftOpenValue=Dimensions.get('window').width;this.rightOpenValue=-Dimensions.get('window').width;return(data.id}renderItem={({item})=>({item.title}//Thisrepeats9times(9Index)}renderRightView={()=>()}leftOpenValue={this.leftOpenV

javascript - react native Flatlist 网格和项目标题

我想自定义一个屏幕:所以我使用FlaSTList并检查项目是否是标题我将使用item=window.with设置,如果不是widthitem=window.width/3。但它的错误。这是我的代码:const{width,height}=Dimensions.get("window")classAppextendsReact.Component{constructor(){super()this.state={data:[{name:"Movies",header:true},{name:"Interstellar",header:false},{name:"DarkKnight",h

javascript - React Native FlatList 水平模式根本不起作用

我正在使用ReactNative0.44.0,我正在尝试使用卡片样式布局制作水平FlatList。无论出于何种原因,无论我做什么,我都无法激活水平模式。它似乎总是垂直呈现...这是我使用的代码:{this.newsFeedListRef=ref;}}renderItem={this.renderNewsFeedRow.bind(this)}keyExtractor={(item,index)=>`feed_${index}`}onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}renderScrollComponent={this.

javascript - 将数据加载到 React Native FlatList

我完全承认我现在对ReactiveNative还很陌生,所以我预计这是一个简单的答案和一个潜在的愚蠢问题:)事实上,这本身可能不是RN问题,因为我会解释如下。我有以下代码:classMyScreenextendsReact.Component{constructor(inProps){super(inProps);this.state={listData:[]};}render(){return({item.firstName}{item.lastName}}/>);}asynccomponentDidMount(){constdata=[];letkeys=awaitAsyncSto

javascript - 大列表的 React-Native FlatList 性能问题

我的代码使用FlatList将Json数据获取到数组中列出数据.它看起来像一排电话簿照片和文字。这是我的代码:renderItem=({item})=>()render(){console.log(this.state.myData);return();}它的工作原理,我得到了输出,但性能很慢。渲染大约需要10秒,这对用户来说很烦人。我该怎么做才能让它更快? 最佳答案 编辑2019年12月20日:这个答案的信息成为了officialdocs的一部分.你应该检查一下!编辑2018年5月26日:这个答案变成了biggerandmorec

javascript - ReactNative Flatlist - RenderItem 不工作

所以我尝试使用ReactNative的FlatListrenderItem属性,但发生了一些非常奇怪的事情。data属性设置为一个包含未定义元素的数组,但是在renderItem函数中,它给我一个错误,指出参数函数的定义是未定义的,除非我调用参数item。这是我的代码:exportdefaultclassProfileextendsReact.Component{onLearnMore=(user)=>{this.props.navigation.navigate('UserDetail',user)}render(){return({console.log(item)return(t

javascript - 在 FlatList 上使用 React Native 搜索过滤器

我正在尝试根据搜索栏文本搜索平面列表。我遇到的问题是,当用户输入错误时……说他们想输入“burger”,但错误地输入了“burget”,然后它应该返回任何内容。当用户删除“t”时,它应该再次重新呈现平面列表,最后一个文本与“burge”部分匹配。注意:使用react-native-elements搜索栏,它允许我仅使用e或event调用文本。我目前在Main.js文件中的内容:searchText=(e)=>{lettext=e.toLowerCase();lettrucks=this.state.data;//searchbyfoodtrucknameletfilteredName=

javascript - 如何在 react native 的 flatlist 中应用延迟加载

在ReactNative的Flatlist中应用延迟加载的最佳方法是什么。目前在平面列表中有无限滚动。我是ReactNative的新手,所以我不知道。 最佳答案 你应该使用onEndReached:当滚动位置在呈现内容的onEndReachedThreshold范围内时调用一次。和onEndReachedThreshold:列表的底部边缘距离结尾多远(以列表的可见长度为单位)必须距离内容的结尾多远才能触发onEndReached回调。因此,当内容末尾在列表可见长度的一半以内时,值为0.5将触发onEndReached。例如:clas

javascript - FlatList 与 map react-native

我最近开始使用react-native并遇到了FlatList组件。在使用react时,我总是将map与数组一起使用。我正在使用FlatList但是当我想更改FlatList中项目的flex-direction时出现问题所以我恢复到使用map。下面是使用这两种方法的两个例子:map{this.state.images.map(image=>{return()})}平面列表{return()}}keyExtractor={(item,index)=>index}/>谁能解释为什么应该使用FlatList而不是map或相反? 最佳答案