Reactnative Basic Tutorials

Through the tutorial documentation, we developed a small project (ListView) that uses the same code on Android and iOS, showing the same style that shows the ease of reactnative development.

Show effect

工欲善其事, its prerequisite. Development environment Atom Integrated nuclide.

Atom configuration and plugins are stored in .atom folders, and if you want to re-use Atom, delete the folder. In the development process, the use of atom integration nuclide will be special card , the reason is unclear, Facebook did not give a solution to the answer. can also * * Do not install **nuclide temporarily. or write using Pycharm.

1. React

Configure the APM command to open the Atom editor, Atom -> Install Shell Commands then.
React-demos contains examples of some of the react offered by Facebook, react documentation provides a way to use it.

Install the display HTML control atom HTML Preview apm install atom-html-preview .

Start Demo01 's index.xml, and atom index.html click on the page to ctrl+shift+h see the HTML page.

Based on the demo, you can learn the content of react, mainly based on the components in build, to develop a simple HTML page.

2. Tutorial

The app for displaying the ListView is developed according to tutorial and can be run under Android and iOS without the need to modify the code to index.android.js index.ios.js use the same code under and under.

The specific content can refer to the document, written is already very detailed.

Code

/** * Sample React Native App *HTTPS://github.com/facebook/react-native*/' use strict ';varReact =require(' react-native ');var{appregistry, Image, StyleSheet, Text, View, ListView,} = React;varMocked_movies_data = [{title:' Title ', Year:' + ',Posters: {thumbnail:' http://i.imgur.com/UePbdph.jpg '}},];varRequest_url =' Https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json ';varAwesomeproject = React.createclass ({Componentdidmount:function() { This. Fetchdata (); },getinitialstate:function() {return{DataSource:NewListview.datasource ({rowhaschanged: (Row1, row2) =Row1!== Row2,}),Loaded:false,    }; },Fetchdata:function() {Fetch (Request_url). Then((response) = Response.json ()). Then( responsedata) = {This . SetState ({dataSource: this . State.dataSource.cloneWithR      OWS (responsedata.movies), Loaded: true,}); }). Done(); },Render:function(){if (! this. state.loaded){return  This.Renderloadingview(); }return (<listview datasource={this. State.datasource} renderrow={this. Rendermovie} Style={styles.listview}/>); },Renderloadingview:function(){return (<view style={styles.container}> <Text> Loading movies ... </Text> </View>); },Rendermovie:function(Movie){return (<view style={styles.container}> <image Source={{uri:movie.posters.thumbnail}} Style={styles.thumbnail}/> <view style={styles.rightcontainer}> <text style={styles. title}>{movie.title}</text> <text style={styles.year}>{movie.year}</text> </VIEW&G      T </View>); },});var Styles=StyleSheet.Create({container: {flex:1, Flexdirection:' Row ', Justifycontent:' Center ', Alignitems:' Center ', BackgroundColor:' #F5FCFF ',}, welcome: {fontSize: -, TextAlign:' Center ', margin:Ten,}, instructions: {textAlign:' Center ', Color:' #333333 ', MarginBottom:5,}, thumbnail: {width: -, Height:Bayi,}, Rightcontainer: {flex:1,}, Title: {fontSize: -, MarginBottom:8, TextAlign:' Center ',}, Year: {textAlign:' Center ',}, ListView: {paddingtop: -, BackgroundColor:' #F5FCFF ',  },});Appregistry.registercomponent(' Awesomeproject ', () = Awesomeproject);

The code is the same as the tutorial. render: function()is the main method of application, JS code style is very refreshing.

The main function of the code is to download the JSON data from the Internet, the name of the movie, the time \ Picture, through styles and view the cooperation, in the form of a list to show. Rely on var React = require(‘react-native‘); modules, using the features provided by reactnative to develop JS logic, on different platforms.

Git:https://github.com/spikeking/reactnativetutorial.git

OK, basic development has been completed.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Reactnative Basic Tutorials