React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用 FlatList或是 SectionList。

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

支持如下这些常用的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。
属性
名称 类型 必填 说明
renderItem function 是 从data中挨个取出数据并渲染到列表中。
data array 是 为了简化起见，data 属性目前只支持普通数组。
ItemSeparatorComponent component 否 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。
ListEmptyComponent component, function, element 否 列表为空时渲染该组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
ListFooterComponent component, function, element 否 尾部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
ListHeaderComponent component, function, element 否 头部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
columnWrapperStyle style object 否 如果设置了多列布局（即将numColumns值设为大于 1 的整数），则可以额外指定此样式作用在每行容器上。
extraData any 否 如果有除data以外的数据用在列表中（不论是用在renderItem还是头部或者尾部组件中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新。
getItemLayout function 否 getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。
horizontal boolean 否 设置为 true 则变为水平布局模式。
initialNumToRender number 否 指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。
inverted boolean 否 翻转滚动方向。实质是将 scale 变换设置为-1。
onEndReached function 否 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
onRefresh function 否 如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。
refreshing boolean 否 在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号。
方法
scrollToEnd()
滚动到底部。如果不设置getItemLayout属性的话，可能会比较卡。

scrollToIndex()
将位于指定位置的元素滚动到可视区的指定位置，当viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央。

Props（属性）
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）

State（状态）
props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。

每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。这里我们使用定时器来不停调用setState，于是组件就会随着时间变化不停地重新渲染。

样式
实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。

指定宽高
最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

弹性（Flex）宽高
在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

使用Flexbox布局
在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。

在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

处理文本输入
TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

let Platform=require(‘Platform’);
let (Platform.OS===“android”){
…/Android平台需要运行的代码
}else{
…//IOS平台需要运行的代码
}

处理触摸事件(主要讲Button和Touchable这2个组件)
Button是一个简单的跨平台的按钮组件。

Touchable 系列组件

这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计，那就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮，视频教程如何制作一个按钮讲述了完整的过程。或者你也可以在 github.com 网站上搜索 ‘react native button’ 来看看社区其他人的作品。

使用滚动视图
ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。

ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的FlatList组件。

使用长列表
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择

实例

1. 逻辑代码

import React, {Component} from ‘react’;
import {
StyleSheet,
FlatList,
Text,
View
} from ‘react-native’;

export default class App extends Component {
constructor(props) {
super(props);
this.state = {
turnOn: true,
turnOff: false
}
}
render() {
return (



FlatList



<FlatList
data = {[
{key: ‘Java’},
{key: ‘Android’},
{key: ‘iOS’},
{key: ‘Flutter’},
{key: ‘React Native’},
{key: ‘Kotlin’},
]}
renderItem = {({item})=> {item.key} }
/>


);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#F5FCFF’,
},
title_view:{
flexDirection:‘row’,
height:50,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor:’#27b5ee’,
},
title_text: {
fontSize:20,
color:‘white’
},
list: {
flex: 1,
paddingTop: 22
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});

//demo
import React from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View
} from ‘react-native’;

class HelloWorld extends React.Component {
render() {
return (

Hello, World

)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
},
hello: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
});

AppRegistry.registerComponent(‘MyReactNativeApp’, () => HelloWorld);