On your second day of RN, try a common mobile feature. Request server + return JSON + display list. I am a Java to Android ape, no JS foundation, no Python, started RN before watching Node.js for 2 days. If you are not the same as me, my next introductory Keng guide may be for you. The structure of the created project looks like this. It looks like there’s a whole Android project directory and an IOS project directory. The IDE I use is VSCode. The name of the project is DEBUG, please don’t mind. Node_modules is a library that Node depends on. This code will start with index.android.js.

Full code:


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

export default class debug extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: null,
    };
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          movies: responseData.movies,
        });
      })
      .done();
  }
  render() {
    if(! this.state.movies) {return this.renderLoadingView();
    }

    return this.renderMovie(this.state.movies);
  }
  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }

  renderMovie(movies) {
    return( <View style={styles.container}> <FlatList data={movies} renderItem={({item}) => <Text Style ={styles.item}>{item.title}, issued in {item.releaseYear} </Text>} /> </View>); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent:'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

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

Copy the code

Here’s what the code means:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Alert,
  Text,
  View,
  FlatList
} from 'react-native';
Copy the code

So this is the most common import operation, and notice that if you’re going to use a Button, an Image, or something like that, you’re going to do it here, and this time you’re going to use Text to display a Text, and FlatList, which is the equivalent of Android’s original ListView, The nice thing about this thing is that it doesn’t render off-screen, saving resources (according to the website). Okay, it doesn’t matter.

Props and state props are specified in the parent component, and once specified, they do not change during the lifetime of the specified component. For data that needs to change, we need to use state.

constructor(props) {
    super(props);
    this.state = {
      movies: null,
    };
  }
Copy the code

Put a movie in state to store data.

Life cycle

componentDidMount() {
    this.fetchData();
  }
Copy the code

We request network data after the first rendering is complete. All network actions are recommended to be done in componentDidMount. ComponentDidMount () this method is called after render().

Personal Understanding:

That dotted box up there is the equivalent of onCreate gone. Changed as props, componentWillReceiveProps () is called, in this way you can change the state, and then call shouldComponentUpdate () returns whether need to update the interface, if you don’t need to return false, The componentWillUpdate and componentDidUpdate methods are also not called. This returns true by default. When a component is to be removed from the interface, componentWillUnmount() is called, which does component-related cleanup, such as canceling timers, network requests, and so on. Suggest only in componentWillMount componentDidMount, componentWillReceiveProps method to modify the state.

This is the request data.

fetchData() {
    fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          movies: responseData.movies,
        });
      })
      .done();
  }
Copy the code

Fetch appears to be an RN native network request method. And it’s asynchronous!! Promise is also used here. What promise is, I read a tutorial on the Internet, and it feels like a callback. I don’t know what it is. The fetch returns the Promise object, which will then depending on the state. There are two “THEN” s. The data is then assigned to state.

render() {
    if(! this.state.movies) {return this.renderLoadingView();
    }

    return this.renderMovie(this.state.movies);
  }
Copy the code

Here the specific render methods are called based on the state of movies in state. The focus here is on renderMovie

The FlatList attribute contains two properties: data for storing data and renderItem for rendering.

renderMovie(movies) {
    return( <View style={styles.container}> <FlatList data={movies} renderItem={({item}) => <Text Style ={styles.item}>{item.title}, issued in {item.releaseYear} </Text>} /> </View>); }Copy the code

=> This arrow is preceded by the argument list and followed by the return value, which is a kind of shorthand for a function, like lamda, which is a new feature of ES6. Item is a traversal of each item in data.