React-native Getting Started Guide (v)--ui components

React-native Getting Started Guide github:https://github.com/vczero/react-native-lession

React-native: Develop your native app with JavaScript, unleash the Native UI experience and experience hybird development efficiency.

The articles written in the last one weeks are as follows:

• 1th article Hello React-native
• 2nd. Understanding Code Structure
• 3rd article css and layout
• The 4th Chapter react-native the layout of learning
• 5th Chapter UI Components

There are several needs this week to complete (this piece will be updated at all times):

• 6th article JSX Syntax
• 7th Self-write component
• The 8th chapter of modular Development
• 10th Building Project Structure
• The 11th Article source analysis

5th UI Component One, currently react-native supported components

On the official website of facebook React-native, you can see the currently supported components: https://facebook.github.io/react-native/docs/getting-started.html#content

Second, how to correctly run the UI component example

We can find an example at react-native's github project address at https://github.com/facebook/react-native/tree/master/Examples/UIExplorer. Download the react-native code base and copy all files in the UIExplorer directory to your newly created project. In fact UIExplorerApp.js is the startup file for the entire project. There are two ways to start a project:

1. The first is to modify jsCodeLocation = [NSURL URLWithString: @ "http: // localhost: 8081 / index.ios.bundle"];

2. The second is to copy the code in UIExplorerApp.js to index.ios.js. At this time, pay attention to:
AppRegistry.registerComponent (‘HelloWorld’, () => UIExplorerApp);
HelloWorld is the name of your project, if you have already started the project, you need to make sure this name is consistent.

The interface after the project is launched is as follows, you can change the UI components to see the effect.

Iii. Activity Indicator Components

In fact, how to use each component, you can go to the demo to see the code. Here is a brief introduction. The activity indicator component can do loading, drop-down refresh, etc.

IV. Calendar Components

Five, picture components

VI. List Components

VII. Navigator Components

Viii. Navigation Components

Nine, switch components

For the remaining components, you can view the demo running and learning. In fact, it is equivalent to the html tag. It has a certain function and is just used to it.

React-native Getting Started Guide (v)--ui components