React Native

 

https://www.cnblogs.com/powertoolsteam/p/react-native-tutorials1.html

 

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

export default class MyApp extends Component {

  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount(){
    return fetch('https://api.douban.com/v2/movie/top250?start=1&count=2')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.subjects,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

  render(){

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item.title}, {item.year}</Text>}
          keyExtractor={(item, index) => item.id}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

 

调试

cmd + D