今天試了一下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>
        )
    }