react-native FlatList 无法垂直滚动的问题

今天试了一下FlatList 组件，渲染都没什么问题，问题是元素多了以后会显示不完全，而且无法拖动，所以才有今天这个记录####

//先看一份demo


import React,{Component} from 'react';
import {View,Text, FlatList} from 'react-native';
export default class HomeScreen extends Component {
    constructor(){
        super()
        this.state = {
            listData: []
        }
    }
    componentDidMount(){
        this.getData()
    }
    getData(){
        //比如是从后台请求到的数据
        let data = [
            {id:'1',name:'张三2323'},
            {id:'2',name:'李四233'},
            {id:'3',name:'王五'},
            {id:'4',name:'赵六1'},
            {id:'5',name:'赵六2'},
            {id:'6',name:'赵六3'},
            {id:'7',name:'赵六4'},
            {id:'8',name:'赵六5'},
            {id:'9',name:'赵六6'},
            {id:'10',name:'赵六7'},
            {id:'11',name:'赵六8'},
            {id:'12',name:'赵六9'},
            {id:'13',name:'赵六10'},
            {id:'14',name:'赵六82'},
            {id:'15',name:'赵六92'},
            {id:'16',name:'赵六102'},
            {id:'17',name:'赵六83'},
            {id:'18',name:'赵六93'},
            {id:'19',name:'赵六104'},
            {id:'20',name:'赵六105'},
        ]
        //这里进行赋值
        this.setState({listData: data})
    }
    render() {
        return (
            <View>
                <FlatList
                    data={this.state.listData}
                    renderItem={({item}) => <Text>{item.name}</Text>}
                    keyExtractor={(item) => item.id}
                />
                <Text>Home  Screen</Text>
            </View>
        )
    }
}

上面的代码是根据官网指示来写的，但是却只能显示列表数据，而在显示之外的数据却无法显示，也无法拖动，经过再次查询百度后得到以下解决代码####

//  只需要在FlatList 组件上加入style:flex:1  以及其父组件加上同等的样式  即可！！！
render() {
        return (
            <View style={{flex:1}}>
                <FlatList
                    style={{flex:1}}
                    data={this.state.listData}
                    renderItem={({item}) => <Text>{item.name}</Text>}
                    keyExtractor={(item) => item.id}
                />
                <Text>Home  Screen</Text>
            </View>
        )
    }