ReactNative FlatList多布局展示列表数据

import React, { Component } from "react";
import { Button, FlatList, StyleSheet, Text, View, TextInput } from "react-native";
import Swiper from 'react-native-swiper';
import { PullView } from 'react-native-pull';
import ToastExample from "../toast/ToastExample";

/**
 * 列表的数据源
 *
 * @type {*[]}
 */
const dataList = [
    {
        key: 'Banner',
        type: 1,
        content: 'THIS IS BANNER'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item1'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item2'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item3'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item4'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item5'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item6'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item7'
    },
    {
        key: 'Button',
        type: 3,
        content: 'THIS IS BUTTON'
    },
];

export default class home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    onPullRelease(resolve) {
        //do something
        setTimeout(() => {
                resolve();
            }, 1500);
      }
      onPressItem(item) {
        ToastExample.show(item.content, ToastExample.SHORT)
      }
    
    render() {
        return (
            // 
            
                
                    
                
                
                     item}
                    />
                


            
        )
    }
    renderItem({ item }) {
        if (item.type === 1) {
            return (
                
                    
                        
                            Hello Swiper
                        
                        
                            Beautiful
                        
                        
                            And simple
                        
                    
                
            )
        } else if (item.type === 2) {
            return (
                {this.onPressItem(item)}}>{item.content}
            )
        } else if (item.type === 3) {
            return (
                type3
            )
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
    headSearch: {
        justifyContent: "center",
        backgroundColor: 'blue',
        paddingLeft: 15,
        paddingRight: 15,
        height: 50,
    },
    text: {
        fontSize: 15,
        color: '#2A2A2A'
    },
    textInput: {
        paddingLeft: 5,
        height: 35,
        borderRadius: 20,
        marginLeft: 5,
        marginRight: 5,
        backgroundColor: 'white',
        fontSize: 12,
        color: 'gray',
    },
    banner: {
        height: 200,
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }
})