React Native 之FlatList

1.新建项目

2.因为要用到导航跳转, 所以添加依赖，，这里拷贝这个：

"dependencies": {"@types/react": "^16.9.2","react": "16.8.6","react-native": "^0.60.0","react-native-gesture-handler": "^1.4.1","react-native-reanimated": "^1.2.0","react-native-vector-icons": "^6.6.0","react-navigation": "^3.0.0"},

执行:

按照官方步骤:
yarn add react-navigation
yarn add react-native-gesture-handler react-native-reanimatedcd ios
pod install
cd ..链接第三方库
react-native link react-native-reanimated
react-native link react-native-gesture-handler

4. 代码：

index.js

/*** @format*/import {AppRegistry} from 'react-native';
import {createStackNavigator,createAppContainer} from 'react-navigation'import App from './App';
import FlatListDemo from './pages/FlatListDemo';
import {name as appName} from './app.json';const AppRoot = createAppContainer(createStackNavigator({App:{screen:App,},FlatListDemo:{screen:FlatListDemo,defaultNavigationOptions:{title:'FlatListDemo'}}
}))AppRegistry.registerComponent(appName, () => AppRoot);

App.js

/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Fragment,Component} from 'react';import {SafeAreaView,StyleSheet,ScrollView,View,Text,StatusBar,Button,} from 'react-native';export default class App extends Component {render(){const {navigation}=this.props;return (<View><Buttontitle={'FlatListDemo'}onPress={()=>{navigation.navigate('FlatListDemo');}}/></View>);}}

./pages/FlatListDemo.js

import React, {Fragment,Component} from 'react';
import {SafeAreaView,StyleSheet,ScrollView,View,Text,StatusBar,FlatList,
} from 'react-native';const CITY_NAME = ['北京','上海','广州','武汉','杭州','三亚','宁波','杭州','合肥','芜湖','福州','厦门','温州'];
export default class FlatListDemo extends Component {_renderItem(data){return <View style={styles.item}><Text style={styles.text}>{data.item}</Text></View>}render(){return (<View><FlatListdata={CITY_NAME}renderItem={(data)=>this._renderItem(data)}/></View>);}
}const styles = StyleSheet.create({container:{flex:1,alignItems:'center',backgroundColor: '#F5FCFF'},item:{backgroundColor: '#168',height:200,marginRight:15,marginLeft:15,marginBottom:15,alignItems:'center',//justifyContetnt:'center',},text:{color:'white',fontSize:20,},})

效果图：

转载于:https://www.cnblogs.com/liuw-flexi/p/11453351.html

React Native 之FlatList相关推荐

【react native】Flatlist实现上拉滚动加载
参考博客:React Native FlatList上拉加载.FlatList enum FooterType {Null = 0,NoData = 1,LoadingData = 2, }expor ...
React Native 实现FlatList的下拉刷新上拉加载
RN对列表已经实现了下拉刷新与上拉加载的功能,但是为了更好用,做了封装. 实现的功能: 1.下拉刷新,使用原生下拉头. 2.上拉加载,自定义加载布局. 3.处理了重复刷新或重复 ...
react native关于FlatList的随手记
FlatList 注意: 1. 滑出渲染区域后,内部状态不保留,请确保组件以外保留了数据 2. 为了优化内存占用同时保持滑动顺畅,列表内容会在屏幕外绘制,如果滑动速度超过渲染速度,则会先看到空白内容3 ...
React Native——组件FlatList
属性添加头部组件 ListHeaderComponent属性用来给FlatList添加头部组件简单使用: //ES6之前写法 _header = function () {return (< ...
react native scrollView FlatList 多级联动
思路就是监听 onscroll方法改变其他联动控件,下面是一个例子 import React, {Component} from 'react'; import {StyleSheet,Text, ...
如何构建具有实时搜索功能的React Native FlatList
by Vikrant Negi 通过Vikrant Negi 如何构建具有实时搜索功能的React Native FlatList (How to build a React Native FlatL ...
React Native列表视图FlatList使用优化实践指南
列表视图在app中是非常常见的,目前React Native比较严重的性能问题集中在FlatList大列表等地方,以下通过js层的优化,甚至原生层的优化封装,使性能媲美原生. FlatList Rea ...
React Native学习（七）—— FlatList实现横向滑动列表效果
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
android listview 滚动条隐藏,隐藏滚动条在FlatList（React Native）中Android
我想在我的应用程序中使用FlatList(React-native).我正在水平使用它并可以看到滚动条.在ScrollView中有一个选项来隐藏滚动条,但不在FlatList中.有没有人能够以其他方式 ...

React Native 之FlatList

React Native 之FlatList相关推荐

最新文章

热门文章