(Friendship tip: RN study, from the beginning of the most basic, you do not want to be too basic, students who know, please skip, hope not to delay the valuable time of the students who have learned)

React Native looks a lot like React, and it’s actually based on React, except that its base components are Native components instead of Web components. So the experience interaction is much closer to native operation, so the experience is much better than the Web. The fact that it can be cross-platform and the experience is close to native has made it popular over the past 15 years.

To understand the basic structure of React Native, we need to first understand some basic React concepts, such as the JSX syntax, components, state, and props properties. So in this article we’re going to focus on Props, State, and style styles. Today’s introduction is based on the official React Native documentation. The official documentation address: Props: https://facebook.github.io/react-native/docs/props.html state: Style: https://facebook.github.io/react-native/docs/state.html https://facebook.github.io/react-native/docs/style.html

props

Props (properties) concept

Most components can be customized with various parameters at creation time. These parameters for customization are called props (properties). Props is property passing, and it is one-way. An object can be passed with multiple attributes, which is the syntax in ES6.

Example 1:

The first example on the official website is to explain this concept with a ready-made Image foundation component, as follows:

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      
    );
  }
}
AppRegistry.registerComponent('Bananas', () => Bananas);Copy the code

When we create an image, we can use the props property named source to control what image the image will display.

Notice that {PIC} is surrounded by parentheses that we need to embed the PIC variable into the JSX statement. We can embed any valid JavaScript expression in a JSX statement with parentheses.

In order to better illustrate the use and concept of props, I modified the above example. This example is just to illustrate the use of the props property. It is not recommended to use this method because image is a ready-made basic component.

Modified examples:

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

class Bananas extends Component {
  render() {
    return (
      
    );
  }
}

class FirstProject extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      
        
      
    );
  }
}
AppRegistry.registerComponent('FirstProject', () => FirstProject);Copy the code

Here I define a component named Bananas and a property named image props. Note that image is the smaller component, and the larger image is the official image base component. In the Image component of the custom Bananas component, we reference the properties of the Image we defined. So maybe you can understand the use of props. Basically, you customize the parameters and pass the values.

Example 2

The second example given by the authorities, which is very clear, is this.

Hello {this.props.name}! ) ; } } class LotsOfGreetings extends Component { render() { return ( ); } } AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings); /code>Copy the code

You create a custom component called Greeting, and the property name is name, passing different name values and displaying different names in Text.

state

React relies on a state to maintain state, and updates the DOM when state changes. There are two types of data used to control a component: props and state. The props is set in the parent component, and its lifecycle cannot be changed once specified. Changes to the data in the component are controlled by state.

Normally, we initialize the state in the constructor constructor and then call the setState method if we need to change it. The official example is an example of flashing text, see how the official example is to create the flashing text effect.

example

import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); this.state = { showText: true }; SetInterval (() => {this.setState({showText:! this.state.showText }); }, 1000); } render() {display = this.state.showtext? this.props.text : ' '; return ( {display} ); } } class BlinkApp extends Component { render() { return ( ); }}Copy the code

First, it is a component that customizes a Blink, initializes state in the constructor, then writes a timer that changes state every 1 second, then setState, then in the render() method, determines the state change, displays text if it is true, false displays null. That's how you get the flash effect.

Then we use the Blink component in BlinkApp and pass in the text we need.

The renderings are as follows:



In fact, in the actual development, we do not need to set a timer to change the state, in general, when we get the server data or user input, we update the state to display the latest data. And that's what we're doing with setState.

style

React Native doesn't need to use any special language or syntax to define styles. We still use JavaScript to write styles. All core components accept a property named style. The only difference is that attribute styles are named in a hump nomenclature, such as background-color to backgroundColor.

Example:

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class FirstProject extends Component { render() { return ( just red just bigblue bigblue, then red red, Then BigBlue non-famous programmer); } } const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); AppRegistry.registerComponent('FirstProject', () => FirstProject);Copy the code

The simplest use of styles in JS is that the style property can be a plain JavaScript object. But here we can pass in an array style, and the styles at the end of the array override the styles at the end of the array, and the styles at the end take precedence. So we can use it this way to inherit styles.

Because of the complexity of the components, we recommend using stylesheet.create to define the styles of the components centrally, as we did above, but also individually, as we did with the last one in the example above. In the text display above, the third and fourth use the array style method. The latter styles overwrite the previous ones, and the last one is embedded so that the front part is red and the back part is blue.

The effect picture is as follows:

React Native configuration For Android

React Native is an IDE for Code reminders -- VS Code(Click)

Low low low

Nuggets is a high quality technology community, from RxJava to Android Studio, performance optimization to excellent open source libraries, so that you don't miss every technical dry product of Android development. Long press the picture qr code to identify or search for "gold digging" in the major application market, the technology is in your grasp.

Review images

Click on theRead the originalFor details.