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 (
            // <View style={{justifyContent:"center"}}></View>
            <View style={styles.container}>
                <View style={styles.headSearch}>
                    <TextInput inlineImageLeft="icon_search" inlineImagePadding={10}
                        placeholder="搜索你要输入的内容" textAlignVertical="center" placeholderTextColor="gray" style={styles.textInput} />
                </View>
                <PullView onPullRelease={this.onPullRelease}>
                    <FlatList
                        data={dataList}
                        renderItem={this.renderItem.bind(this)}
                        keyExtractor={(item) => item}
                    />
                </PullView>


            </View>
        )
    }
    renderItem({ item }) {
        if (item.type === 1) {
            return (
                <View style={styles.banner}>
                    <Swiper showsButtons={true}>
                        <View style={styles.slide1}>
                            <Text style={styles.text}>Hello Swiper</Text>
                        </View>
                        <View style={styles.slide2}>
                            <Text style={styles.text}>Beautiful</Text>
                        </View>
                        <View style={styles.slide3}>
                            <Text style={styles.text}>And simple</Text>
                        </View>
                    </Swiper>
                </View>
            )
        } else if (item.type === 2) {
            return (
                <Text style={{ height: 60, textAlignVertical: "center", paddingLeft: 15 }}  onPress={()=>{this.onPressItem(item)}}>{item.content}</Text>
            )
        } else if (item.type === 3) {
            return (
                <Text>type3</Text>
            )
        }
    }
}

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',
    }
})