first react native_first react native-CSDN博客

本文链接：https://blog.csdn.net/haolifengwang/article/details/86659841

本文介绍了一个使用React Native构建的电影应用程序，该应用从GitHub上的JSON文件加载数据，并使用FlatList组件展示电影列表。每个电影条目包括海报缩略图、标题和年份。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, {Component} from 'react';
import {Platform,FlatList, StyleSheet, Text,Image, View} from 'react-native';

var REQUEST_URL = "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false
    };
  this.fetchData = this.fetchData.bind(this);
};
  componentDidMount(): void {
    this.fetchData();
  }
  fetchData(){
    fetch(REQUEST_URL).then(response=>response.json()).then(responseData => {
      this.setState({
        data:this.state.data.concat(responseData.movies),
        loaded:true
      });
    });
  }
  render(){
    if(!this.state.loaded){
      return this.renderLoadingView();
    }
    return (
        <FlatList renderItem={this.renderMovie} data={this.state.data} keyExtractor={item=>item.id} style={styles.list}/>
    );
  }
  renderLoadingView(){
          return(
              <View style={styles.container}>
                <Text>Loading movies...</Text>
              </View>
          );
  }
  renderMovie({item}){
          return(
            <View style={styles.container}>
              <Image source={{uri:item.posters.thumbnail}}
                style={styles.thumbnail}
              />
              <View style={styles.rightContainer}>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.year}>{item.year}</Text>
              </View>
            </View>
          );
  }
}

var styles = StyleSheet.create({
  container:{
    flex:1,
    flexDirection:"row",
    justifyContent:"center",
    alignItems:"center",
    backgroundColor:"#F5FCFF"
  },
  rightContainer:{
    flex:1
  },
  title:{
    fontSize:20,
    marginBottom:8,
    textAlign: "center"
  },
  year:{
    textAlign: "center"
  },
  thumbnail:{
    width:53,
    height: 81
  },
  list: {
    paddingTop:20,
    backgroundColor:"#F5FCFF"
  }

});