**高性能的简单列表组件,支持下面这些常用的功能:** 1. 完全跨平台。 2. 支持水平布局模式。 3. 行组件显示或隐藏时可配置回调事件。 4. 支持单独的头部组件。 5. 支持单独的尾部组件。 6. 支持自定义行间分隔线。 7. 支持下拉刷新。 8. 支持上拉加载。 9. 支持跳转到指定行(ScrollToIndex)。 如果需要分组/类/区(section),请使用`<SectionList>`。 #### 使用 导入模块功能 ~~~ import { FlatList, StyleSheet,View, Text,Button,Image,StatusBar,WebView,TouchableHighlight} from 'react-native'; ~~~ 示例 ~~~ render() { return ( <View style={styles.container}> <FlatList data={[ {key:'1',name:'张三',text:'我不知道说什么!想说什么然后想想又不知道说什么了!希望最底层的孩子都有梦想,都能有承载梦想的力量!谢谢捐款的朋友,不要忘记那些被忘记的孩子',time:'2017-01-02 10:20:33'}, {key:'2',name:'xiongshi1998',text:'出生无法选择,但人生可以选择',time:'2017-01-02 10:20:33'}, {key:'3',name:'2222',text:'过多的关注和曝光会不会对孩子的正常生活有影响?一阵风似的离开后,孩子会不会有点失落?',time:'2017-01-02 10:20:33'}, {key:'4',name:'2222',text:'说真的没有媒体的报道 谁知道大山深处的苦难啊 希望媒体多多关注社会弱势群体 大山深处还有很多很多的冰花男孩呢',time:'2017-01-02 10:20:33'}, {key:'5',name:'2222',text:'说真的没有媒体的报道 谁知道大山深处的苦难啊 希望媒体多多关注社会弱势群体 大山深处还有很多很多的冰花男孩呢',time:'2017-01-02 10:20:33'} ]} renderItem={({item}) => ( <TouchableHighlight> <View style={styles.item}> <View style={{flex:2}}> <Image source={require("./icon/ic_person_outline_black_24dp.png")} style={styles.userphoto} /> </View> <View style={{flex:10}}> <Text style={styles.name}>{item.name}</Text> <Text onPress={() => this.props.navigation.navigate('dynamicDetail',{name:'6666'})} style={styles.text}>{item.text}</Text> <Text style={styles.time}>{item.time}</Text> </View> </View> </TouchableHighlight> )} /> </View> ); } ~~~ #### 字段说明 **ItemSeparatorComponent** 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。 ~~~ ItemSeparatorComponent={ ()=>( <View style={{backgroundColor:'#EBEBEB',height:5}}> </View> ) } ~~~ ![](https://box.kancloud.cn/a0575bbab0d0b562bab296a679325efe_541x865.png) **ListEmptyComponent** 列表为空时渲染该组件。可以是React Component, 也可以是一个render函数, 或者渲染好的element。 ~~~ ListEmptyComponent={ ()=>( <View style={{flex:1}}> <Text>暂无数据</Text> </View> ) } ~~~ **ListFooterComponent** 尾部组件 ~~~ ListFooterComponent={ ()=>( <View style={{height:40,justifyContent:'center',alignItems:'center'}}> <Text>我是有底线的</Text> </View> ) } ~~~ ![](https://box.kancloud.cn/f117a093a2a06b15d380a3dc5ab0b0eb_566x475.png) **ListHeaderComponent** 头部组件 ~~~ ListHeaderComponent={ ()=>( <View style={{height:40,justifyContent:'center',alignItems:'center'}}> <Text>有新动态</Text> </View> ) } ~~~ ![](https://box.kancloud.cn/5ecf116b1181a5b529b0bc709c9df07a_537x892.png) 可以在头部组件里渲染一个广告轮播 更多属性参考 http://facebook.github.io/react-native/docs/flatlist.html 完整代码 ~~~ import React from 'react'; import { FlatList, StyleSheet,View, Text,Button,Image,StatusBar,WebView,TouchableHighlight} from 'react-native'; import { TabNavigator,StackNavigator} from 'react-navigation'; //动态组件 class DynamicScreen extends React.Component { static navigationOptions = { title: '动态', tabBarIcon: ({ focused, tintColor }) => ( <Image source={require('./icon/ic_home_black_24dp.png')} style={{ width: 28, height: 28, tintColor: tintColor }} /> ), }; render() { return ( <View style={styles.container}> <FlatList data={[ {key:'1',name:'张三',text:'我不知道说什么!想说什么然后想想又不知道说什么了!希望最底层的孩子都有梦想,都能有承载梦想的力量!谢谢捐款的朋友,不要忘记那些被忘记的孩子',time:'2017-01-02 10:20:33'}, {key:'2',name:'xiongshi1998',text:'出生无法选择,但人生可以选择',time:'2017-01-02 10:20:33'}, {key:'3',name:'2222',text:'过多的关注和曝光会不会对孩子的正常生活有影响?一阵风似的离开后,孩子会不会有点失落?',time:'2017-01-02 10:20:33'}, {key:'4',name:'2222',text:'说真的没有媒体的报道 谁知道大山深处的苦难啊 希望媒体多多关注社会弱势群体 大山深处还有很多很多的冰花男孩呢',time:'2017-01-02 10:20:33'}, {key:'5',name:'2222',text:'说真的没有媒体的报道 谁知道大山深处的苦难啊 希望媒体多多关注社会弱势群体 大山深处还有很多很多的冰花男孩呢',time:'2017-01-02 10:20:33'} ]} renderItem={({item}) => ( <TouchableHighlight> <View style={styles.item}> <View style={{flex:2}}> <Image source={require("./icon/ic_person_outline_black_24dp.png")} style={styles.userphoto} /> </View> <View style={{flex:10}}> <Text style={styles.name}>{item.name}</Text> <Text onPress={() => this.props.navigation.navigate('dynamicDetail',{name:'6666'})} style={styles.text}>{item.text}</Text> <Text style={styles.time}>{item.time}</Text> </View> </View> </TouchableHighlight> )} ItemSeparatorComponent={ ()=>( <View style={{backgroundColor:'#EBEBEB',height:5}}> </View> ) } ListEmptyComponent={ ()=>( <View style={{flex:1}}> <Text>暂无数据</Text> </View> ) } ListFooterComponent={ ()=>( <View style={{height:40,justifyContent:'center',alignItems:'center'}}> <Text>我是有底线的</Text> </View> ) } ListHeaderComponent={ ()=>( <View style={{height:40,justifyContent:'center',alignItems:'center'}}> <Text>有新动态</Text> </View> ) } /> </View> ); } } //动态组件详情组件 class DynamicDetailScreen extends React.Component { static navigationOptions = ({ navigation }) => ({ title: navigation.state.params.name, headerStyle:styles.headerBar, headerTintColor:'#fff' }); render(){ return ( <View style={styles.container}> <View style={{alignItems:'center',justifyContent:'center',padding:5,backgroundColor:'#fff'}}> <Text style={{fontSize:18,color:'#232323'}}>5555555555555555</Text> </View> <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center',paddingBottom:5,backgroundColor:'#fff'}}> <Text>时间:2018-01-25</Text> <Text>大大</Text> <Text>滚滚滚</Text> </View> <WebView source={{html:"<p>2222222222</p>"}} /> </View> ); } } //发现组件 class FindScreen extends React.Component { static navigationOptions = { title: '发现', tabBarIcon: ({ focused, tintColor }) => ( <Image source={require('./icon/ic_group_work_black_24dp.png')} style={{ width: 28, height: 28, tintColor: tintColor }} /> ), }; render() { return ( <View style={[styles.container,styles.findBody]}> <View style={styles.findView}> <Image source={require('./icon/ic_group_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}> 朋友圈 </Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_filter_center_focus_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>扫一扫</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_search_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>搜一搜</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_shopping_cart_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>购物</Text> </View> <View style={[styles.findView,styles.findMT]}> <Image source={require('./icon/ic_games_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>游戏</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_code_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>小程序</Text> </View> </View> ); } } //我的组件 class MyScreen extends React.Component { static navigationOptions = { title: '我的', tabBarIcon: ({ focused, tintColor }) => ( <Image source={require('./icon/ic_account_circle_black_24dp.png')} style={{ width: 28, height: 28, tintColor: tintColor }} /> ), }; render() { return ( <View style={[styles.container,styles.findBody]}> <View style={styles.findView}> <Image source={require('./icon/ic_person_outline_black_24dp.png')} style={styles.findViewIcon2} /> <View style={[styles.findViewText2,{flex:8,justifyContent:'center'}]}> <Text style={{color:'#232323',fontSize:18}}>全球变暖</Text> <Text style={{color:'gray',marginTop:8}}>微信号:weibo</Text> </View> </View> <View style={styles.findView}> <Image source={require('./icon/ic_monetization_on_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>钱包</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_chrome_reader_mode_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>收藏</Text> </View> <View style={[styles.findView,styles.findMT]}> <Image source={require('./icon/ic_photo_library_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>相册</Text> </View> <View style={[styles.findView,styles.findMT]}> <Image source={require('./icon/ic_card_giftcard_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>卡包</Text> </View> <View style={[styles.findView,styles.findMT]}> <Image source={require('./icon/ic_tag_faces_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>表情</Text> </View> <View style={styles.findView}> <Image source={require('./icon/ic_settings_black_24dp.png')} style={styles.findViewIcon} /> <Text style={styles.findViewText}>设置</Text> </View> </View> ); } } //定义tab组件 const TabScreen = TabNavigator({ dynamic: { screen: DynamicScreen }, find: { screen: FindScreen }, my:{ screen:MyScreen } },{ tabBarPosition: 'bottom',//选项卡位置 animationEnabled: true, tabBarOptions: { activeTintColor: '#02A8F3',//选中颜色 inactiveTintColor:'#757575',//未选中颜色 //设置选项卡的背景颜色 style: { backgroundColor: '#FCFCFC', borderTopWidth:1, borderTopColor:'#E8E8E8' }, //去掉安卓点击之后的小黄线 indicatorStyle: { height: 0 }, //是否显示icon图标 showIcon:true, //选项卡样式 tabStyle:{ height:50, paddingBottom:10 }, //icon样式 iconStyle:{ marginBottom:-8, marginTop:12 } } }); //组件样式 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor:'#EBEBEB' }, item: { flex:1, flexDirection:'row', padding:10, backgroundColor:'#fff', }, name:{ color:'#59482E', fontSize:14 }, text:{ color:'#232323', fontSize:14, marginTop:2 }, time:{ color:'gray', fontSize:12, marginTop:8 }, //动态组件图片 userphoto:{ width:40, height:40, tintColor:'#9E9E9E' }, //头部组件+ headAdd:{ width: 24, height: 24, tintColor: '#fff', marginRight:20, }, //发现组件样式 findView:{ backgroundColor:'#fff', marginTop:15, padding:10, alignItems:'center', flexDirection:'row', }, findViewText2:{ flex:8, }, findViewIcon:{ width:24, height:24, marginRight:10 }, findViewIcon2:{ flex:2, width:46, height:46, }, findViewText:{ fontSize:18, color:'#232323', }, findBody:{ backgroundColor:'#EBEBEB' }, findMT:{ marginTop:0, borderTopWidth:1, borderTopColor:'#EBEBEB' }, //header样式 headerBar:{ backgroundColor:'#242529', } }); // myapp路由 const MyApp = StackNavigator({ dynamicStack: { screen: TabScreen, navigationOptions: ({navigation}) => ({ headerStyle:styles.headerBar, headerTintColor:'#fff', headerRight:(<Image source={require('./icon/ic_add_black_24dp.png')} style={styles.headAdd} />), }), }, dynamicDetail: { path: 'dynamic/:name', screen: DynamicDetailScreen, }, }); export default MyApp; ~~~