Application development of reactive native-based Carousel module and debugging under the mobile terminal simulator

Summing up this period of time to learn some of the things reactive native, we come to know, was fired so fire RN, what is a thing, and how to build their own demo.

What is reactive native?

An application framework developed by Facebook that uses react to develop a framework for native applications. In short, it is a framework that can be developed by JS and react.

What is react?

A set of JS framework, but also Facebook open source. Features: JSX syntax (XML-like), modular mode, virtual DOM, unidirectional data flow.

Basic mode: Each react application can be considered a combination of components, and each react component is configured by its properties and state, and when the state changes to update the UI, the structure of the component is maintained by the virtual DOM.

Application examples of react native

React native's model

* Cross-end application development (iOS, Android, web), react-based components, with Web publishing capabilities and native application performance.

Advantages: High development efficiency, short iteration cycle; Multiplexing (reusable encapsulation of some components) hot deployment; Web-based approach to the development of native applications

React native environment construction

Here, I still encounter a lot of problems, probably write down the installation process, most of the official online writing is relatively clear. Address: Http://reactnative.cn/docs/0.31/getting-started.html#content, the following is used for Android simulator.

1: Install node

2: Execute react Native command line

3:android Studio installation (requires Configuration SDK)

4: Install the Bluestacks simulator (above all): http://www.bluestacks.cn/

Run the project

When all of your environments are set up, in the project directory, open the command indicator and enter the command:

CRN-CLI  run-android

At this point, the simulator is started automatically, without any action, but only if you are sure that your emulator is connected, how do you know if the emulator is connected? Enter the following command to view:

ADB  Devices

When the project APK has been fully installed, it will automatically load to launch our project:

About loading and using the Carousel component

First install the plug-in module in your project and then introduce the module in your project code to load it. It is important to note that you need to use the module on a page to introduce the module in that page.

$ NPM I react-native-swiper--save

Let's look at how the next-round component is introduced in a page in its own framework project, where the code is more intuitive to put.

We only need to insert the plug-in into the head, as follows:

Import swiper from ' React-native-swiper ';

When you make a render, you can easily use the plugin to apply it to our development projects.

<swiper Style={styles.wrapper} showsbuttons={true}>        <view style={styles.slide1}>          <Text Style={styles.text}>hello swiper</text>        </View>        <view style={styles.slide2}>          <text style={styles.text}>beautiful</text>        </View>        <view style={styles.slide3}>          <text style={styles.text}>and simple</text>        </View></Swiper>

Here to post the full code of the page, about RN style problem, in fact, compared to the CSS gap is relatively large, here to a style comparison address: Https://github.com/foreverjiangting/react-native-stylesheet-guide

"Use strict"; import React, {Component} from ' React '; import swiper from ' react-native-swiper '; import {Stylesheet,text,vi  EW,} from ' react-native '; export default class Page1 extends Page {render () {return (<viewport><swiper Style={styles.wrapper} showsbuttons={true}> <view style={styles.slide1}> <Text style={styles. Text}>hello swiper</text> </View> <view style={styles.slide2}> <text style= {styles.text}>beautiful</text> </View> <view style={styles.slide3}> <text s Tyle={styles.text}>and simple</text> </View></Swiper></ViewPort>);}} Const STYLES = Stylesheet.create ({wrapper: {}, Slide1: {flex:0.5, justifycontent: ' Center ', Alignitems: ' CE    Nter ', BackgroundColor: ' #9DD6EB ',}, Slide2: {flex:1, justifycontent: ' Center ', Alignitems: ' Center ',   BackgroundColor: ' #97CAE5 ',}, Slide3: { Flex:1, justifycontent: ' Center ', Alignitems: ' Center ', backgroundcolor: ' #92BBD9 ',}, Text: {color: ' #ff F ', fontsize:30, fontweight: ' Bold ',}});

The structure between the modules can be seen in the following code, we add the following code in Index.android.js:

' Use strict '; import {    appregistry      //Register app} from ' react-native '; const Thecompnent = require ('./main ');  Appregistry.registercomponent (' Hellotest ', () = Thecompnent);//attention: Here module.exports must be reserved module.exports = Thecompnent;

How to debug on PC side?

As a developer, there is no debugging tool, it is really sad, fortunately, the simulator provides debugging tools, we look at the demo operation. Open JS Devmodel. debugging is very convenient! Anything that we modify on the PC will be displayed immediately.

OK, open the browser, we can easily see our own file directory. This makes it easy for us to develop on chrome.

At last

Finally, to share this two days to listen to the development of the Qcon conference, the harvest is quite large, the key is Yu Yuxi, explaining Vue.js, is very good, paste all the PPT lecture material, interested can look under:

PPT Link URL: http://ppt.geekbang.org/qconsh2016?from=groupmessage&isappinstalled=0

Ting Feng

Source:http://www.cnblogs.com/jtjds/p/5990367.html

If you feel that reading this article is helpful to you, please click "Recommend" button, your "recommendation" will be my biggest writing motivation! You are welcome to reprint, but without the author's consent

After reprint article must in the article page obvious position gives the author and the original text connection otherwise reserves the right to pursue the legal responsibility.

　

Application development of reactive native-based Carousel module and debugging under the mobile terminal simulator