This is the 19th day of my participation in the August More Text Challenge

preface

React Native allows you to write a set of code that runs multiple applications directly. This article will be based on actual combat, mainly including basic applications, practical skills, principles and mechanisms, and so on, I hope to help you.

Environment set up

First, we made sure the Node environment was installed locally. To get started quickly, we used the official recommended scaffolding tool create-React-native app

npm install -g create-react-native-app # Global installation scaffold tool

create-react-native-app AwesomeProject Create a sample project

cd AwesomeProject
npm start # run
Copy the code

After executing this, we can scan the qr code of the console and access it

Application development

React Native encodes a lot like React.

The React code:

import React, { Component } from 'react';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <div>
          <span>Hello world!</span>
        </div>); }}Copy the code

React Native code:

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

export default class HelloWorldApp extends Component {
  render() {
    return (
        <View>
          <Text>Hello world!</Text>
        </View>); }}Copy the code

We found that the tags need to be introduced by the components provided by React Native, which is not difficult to understand, since React Native will eventually be converted to the corresponding platform’s native components.

Props

React works like react. Let’s look at an example of an image component:

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'http:'
    };
    return (
      <Image source={pic} style={{width: 193.height: 110}} / >); }}Copy the code

Flexbox layout

When writing React code, we usually use CSS for layout, but in a multi-platform, multi-device scenario, React Native provides Flexbox layout. We use Flexbox rules to specify the layout of a component’s child elements. Flexbox provides a consistent layout structure across different screen sizes.

In general, three style attributes, flexDirection, alignItems, and justifyContent, suffice for most layout requirements. This is similar to the Flex layout in CSS, and students who have experience with Flex layout will have a lower threshold for this area.

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

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 1.flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'stretch'}} >
        <View style={{width: 50.height: 50.backgroundColor: 'powderblue'}} / >
        <View style={{width: 50.height: 50.backgroundColor: 'skyblue'}} / >
        <View style={{width: 50.height: 50.backgroundColor: 'steelblue'}} / >
      </View>); }};Copy the code

A long list of

On mobile devices, performance and experience are important. React Native provides several components for displaying long lists of data. Generally speaking, FlatList or SectionList are used.

  • The FlatList component is used to display a vertical scrolling list of elements that are structurally similar but differ only in data.
  • FlatList is more suitable for long lists, and the number of elements can be added or deleted. Unlike ScrollView, FlatList does not render all elements at once. Instead, it preferentially renders elements visible on the screen.
import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'}},]renderItem={({item})= > <Text style={styles.item}>{item.key}</Text>} / ></View>); }}Copy the code

The performance of the list control is better than our own implementation, because in a mobile scenario, there are many factors to consider such as display items, load performance, list rebound, and so on.

summary

This article combines the practical experience of React Native for the author, and the knowledge involved will be relatively basic to give us an overall cognition. In the next article, we will talk about the principles of React Native, including operation principles and rendering principles, based on some summaries and personal understanding.