rn 列表组件FlatList,类似qq看点新闻的布局

FlatList和ScrollView的区别
ScrollView会一次性加载完

<FlatList />

属性:
    data={只支持数组类型的数据}
    
    renderItem={this.回调函数}   //根据data中的数据来渲染每一行
    其中:
    回调函数的参数为item和index，且参数名必须为这两个,否则会无法加载
    
    horizontal={true}   //设置水平布局,默认为竖直
    
    numColumns={n}  //在非水平布局情况下,设置每行显示的列数
    
    columnWrapperStyle={{borderWidth:2,borderColor:'red'}}  //设置每一行的样式
   
    keyExtractor={(item)=>item.aid}   //给每个子元素标记唯一的key,标记了的下次就不会重新渲染

代码示例:

import React,{Component} from 'react'
import {Text,View,ScrollView,StyleSheet, Alert,Dimensions,Navigator,Image,FlatList} from 'react-native'

export default class App extends Component{
    constructor(){
        super();
        this.state={
            list:[{aid:'1',title:'第一篇文章',thump:'./img/钢铁侠4.jpg'},
            {aid:'2',title:'第2篇文章',thump:'./img/钢铁侠4.jpg'},
            {aid:'3',title:'第3篇文章',thump:'./img/钢铁侠4.jpg'},
            {aid:'4',title:'第4篇文章',thump:'./img/钢铁侠4.jpg'},
            {aid:'5',title:'第5篇文章',thump:'./img/钢铁侠4.jpg'},
            {aid:'6',title:'第6篇文章',thump:'./img/钢铁侠4.jpg'},
            {aid:'7',title:'第7篇文章',thump:'./img/钢铁侠4.jpg'}
        ]
        }
    }

    render(){
        return(
            <>
            <View>
                <ScrollView
                horizontal={true}
                // onScroll={this.f}
                style={style.scroll}
                >
                    <Text style={style.word} >首页</Text>
                    <Text style={style.word}>新闻</Text>
                    <Text style={style.word}>娱乐</Text>
                    <Text style={style.word}>游戏</Text>
                    <Text style={style.word}>音乐</Text>
                    <Text style={style.word}>音乐</Text>

                </ScrollView>

                <FlatList
                    //数据
                    data={this.state.list}
                    //根据data中的数据来渲染每一行
                    renderItem={this._renderItem}
                    // horizontal={true}
                    numColumns={2}
                    //设置每一行的样式
                    columnWrapperStyle={{borderWidth:2,borderColor:'red'}}
                    //给每个子元素标记唯一的key,标记了的下次就不会重新渲染
                    keyExtractor={(item)=>item.aid}
                />


                </View>
            </>
        )
    }

    f(){
        // console.log("22");
    }

    _renderItem({item,index}){
        var a='./img/钢铁侠4.jpg';
         return (<View>
            <Image 
                style={{width:180,height:200,resizeMode:'contain'}}
                source={require(a)}
            />
            <Text>{item.title}</Text>

         </View>)
    }

}

const style=StyleSheet.create({
    word:{
        fontSize:30,
        color:'rgba(0,0,0,0.5)',
        paddingLeft:10,
        lineHeight:70

    },
    scroll:{
        borderWidth:2,
        borderColor:'blue',
        borderStyle:'solid',
        height:70,
    }
})