React Native-17：网络数据请求

import React, { useState, useEffect, Fragment } from 'react'
import { StyleSheet, Text, View, Image } from 'react-native'

const App = () =>
{
    let REQUEST_url = "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json"  // github 电影数据接口
    const [DataModel, SetDataModel] = useState({
        // 定义数据模型
        movies: null
    })
    useEffect(() =>
    {
        fetchData()  // 请求网络数据
    }, [])
    const fetchData = () =>
    {
        fetch(REQUEST_url)
            .then((response) => response.json())
            .then((responseJson) =>
            {
                SetDataModel({ ...DataModel, movies: responseJson })
            }, error =>
            {
                console.warn(error);
            })

    }
    const renderLoadingView = () =>
    {
        return (
            <View style={styles.container}>
                <Text>loading...</Text>
            </View>
        )
    }
    const renderMovie = (DataModel) =>
    {
        let movie = DataModel.movies.movies[9]  // 取出数组中的第九个数据
        return (
            <View style={styles.container}>
                <Image style={styles.thumbnail} source={{ uri: movie.posters.thumbnail }} />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>
                        {movie.title}
                    </Text>
                    <Text style={styles.year}>{movie.year}</Text>
                </View>
            </View>
        )
    }
    return (
        <Fragment >
            {!DataModel.movies ? renderLoadingView() : renderMovie(DataModel)}
        </Fragment>
    )
}

export default App

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'pink'
    },
    thumbnail: {
        width: 100,
        height: 80
    },
    rightContainer: {
        flex: 1,
    },
    title: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: 'center'
    },
    year: {
        textAlign: 'center'
    }
})