React Native First demo (1)

The demo is mainly to show a movie message and show 25 movie messages in the ListView. 1. Initialize a project and run

Open Terminal, enter:

React-native Init Demoproject

After entering, initialize a project return information as follows:
Sometimes installing React-native package from NPM ...
This step will be very slow, wait patiently, no problem.

Init demoproject This would
walk you through creating a new React Native project IN/USERS/IOSDEV_SZZC/DOWNLOADS/DEMOPR Oject
Installing react-native package from NPM
... Setting up new React Native app In/users/iosdev_szzc/downloads/demoproject
react@15.0.2 node_modules/react
├──object-assign@4.1.0
├──loose-envify@1.2.0 (js-tokens@1.0.3)
└──fbjs@0.8.3 (immutable@3.8.1, ua-parser-js@0.7.10, promise@7.1.1, isomorphic-fetch@2.2.1, core-js@1.2.6) to
run your apps on IOS:
   cd/users/ Iosdev_szzc/downloads/demoproject
   react-native Run-ios
   -or-
   open/users/iosdev_szzc/downloads/ Demoproject/ios/demoproject.xcodeproj in Xcode hits the
   run button to
run your apps on Android: has an
   Andro ID emulator running (quickest to get started), or a device connected
   cd/users/iosdev_szzc/downloads/demoproject< C16/>react-native run-android

Initialize successfully, CD to Demoproject directory, run

React-native Run-ios

The approximate principle of this operation is to use a script to compile and open the emulator to run, the simulator opens after the following:

This proves that your first react native project is running. 2. Show a movie description

Open the Index.ios.js file in the project, copy the code below, overwrite the original code, save. Then you can see the effect by pressing CMD+R in the simulator.

Import React, {Component,} from ' React ';

Import {appregistry, Image, StyleSheet, Text, View,} from ' react-native '; var mocked_movies_data = [{title: ' Alice in Wonderland 2 ', Year: ', posters: {thumbnail: ' HTTP://PIC.SPIDER.COM.CN/PIC//FILMP

Ic/jdt/1462936153362_mobile2.jpg '}},];
        Class Demoproject extends Component {render () {var movie = mocked_movies_data[0];
                Return (<view style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <image source={{uri:movie.posters.th
    Umbnail}} Style={styles.thumbnail}/> </View>);

}

}; var styles = stylesheet.create ({container: {flex:1, justifycontent: ' Center ', Alignitems: ' Center ', backgroundcolor: ' #F5FCFF ',}, thumbnail: {width:53, heIght:81,},}); Appregistry.registercomponent (' Demoproject ', () = Demoproject);

1.import

There are two imports, from react and react-native, respectively.
React and react-native are two things, we first have a concept. The general difference, the other place to find a more reliable explanation:

The principle of reactjs and react native is the same, it is the virtual DOM implemented by JS to drive the interface view layer rendering.
Reactjs is the driver of HTML DOM rendering; React native is the driver Android/ios native component rendering.
The difference between React and React native

Import React, {
    Component,
} from ' React ';
Import {
    appregistry,
    Image,
    StyleSheet,
    Text,
    View,
} from ' react-native ';

2. Analog Data

Equivalent to a global variable

var mocked_movies_data = [
    {title: ' Alice in Wonderland 2 ', Year: ', posters: {thumbnail: ' http://pic.spider.com.cn/pic// Filmpic/jdt/1462936153362_mobile2.jpg '}},
];

3. Component Rendering

Demoproject is equivalent to a component

Class Demoproject extends Component
{
    render () {
        var movie = mocked_movies_data[0];
        Return (
            <view style={styles.container}>
                <Text>{movie.title}</Text>
                <text>{ movie.year}</text>
                <image
                    Source={{uri:movie.posters.thumbnail}}
                    Style={styles.thumbnail}
                />
            </View>
        );
    }

;

4. Style

Defines the style of components and components in-control,

var styles = stylesheet.create ({
    container: {
        flex:1,
        justifycontent: ' Center ',
        alignitems: ' Center ',
        backgroundcolor: ' #F5FCFF ',
    },
    thumbnail: {
        width:53,
        height:81,
    },
});

5. Register the component for the program entry

Appregistry.registercomponent (' Demoproject ', () = Demoproject);

Modify Style

Change to a layout like the following

+---------------------------------+
|+-------++----------------------+|
||       ||        Title         | | | |
Image       |        | | | | | | | Year          | |
| +-------++----------------------+|
+---------------------------------+

Add three styles and modify the style of a container

Container: {
    flex:1,
    flexdirection: ' Row ',
    justifycontent: ' Center ',
    alignitems: ' Center ',
    backgroundcolor: ' #F5FCFF ',
  },
 Rightcontainer: {
    flex:1,
  },
  title: {
    fontSize : Marginbottom:8,
    textAlign: ' Center ',
  }, year
  : {
    textAlign: ' Center ',
  },

Change the return content to read as follows:

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>
        </View>
      );

Cmd+r Refresh, the effect is as follows

This equivalent to react native runs on the Web server side and cannot be turned off if the emulator prompt is turned off Could not the connect to Development server.
If you accidentally shut down, run this command to start

NPM start

The first to write this, an article too long, will make people lack the courage to look down.
This cheat is actually a simple version of the official website tutorial and refine what I think is better than the details of the version. Interested students can directly visit the official website to study:
Http://facebook.github.io/react-native/docs/tutorial.html