React Native第一個Demo（1）

在Demo主要是展示一個電影資訊和在ListView展示25個電影資訊。 1、初始化一個項目並運行

開啟終端，輸入：

react-native init DemoProject

輸入後初始化一個項目返回資訊如下：
有時候Installing react-native package from npm…
這一步會很慢，耐心等待，沒問題的。

init DemoProjectThis will walk you through creating a new React Native project in /Users/iOSDev_szzc/Downloads/DemoProjectInstalling react-native package from npm...Setting up new React Native app in /Users/iOSDev_szzc/Downloads/DemoProjectreact@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 app on iOS:   cd /Users/iOSDev_szzc/Downloads/DemoProject   react-native run-ios   - or -   Open /Users/iOSDev_szzc/Downloads/DemoProject/ios/DemoProject.xcodeproj in Xcode   Hit the Run buttonTo run your app on Android:   Have an Android emulator running (quickest way to get started), or a device connected   cd /Users/iOSDev_szzc/Downloads/DemoProject   react-native run-android

初始化成功，cd到DemoProject目錄，運行

react-native run-ios

這個啟動並執行大概原理就是用指令碼編譯並開啟模擬器運行，模擬器開啟後大概是這樣的：

這證明你第一個react native項目運行成了。 2、顯示一個電影描述

在項目中開啟index.ios.js檔案，複製下面代碼，覆蓋原來的代碼，儲存。然後在模擬器按下 Cmd+R，就能看到效果了。

import React, {    Component,} from 'react';import {    AppRegistry,    Image,    StyleSheet,    Text,    View,} from 'react-native';var MOCKED_MOVIES_DATA = [    {title: '愛麗絲夢遊仙境2', year: '2016', posters: {thumbnail: 'http://pic.spider.com.cn/pic//filmpic/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.thumbnail}}                    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

這裡有兩個import,分別是from react和react-native
react和react-native是兩個東西，大家先有個概念.大概的區別，其他地方找了一個比較靠譜的解釋：

ReactJs和React Native的原理是相同的，都是由js實現的虛擬dom來驅動介面view層渲染。
ReactJs是驅動html dom渲染； React Native是驅動android/ios原生組件渲染。
React 和 React Native的區別

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

2.類比資料

相當於一個全域變數

var MOCKED_MOVIES_DATA = [    {title: '愛麗絲夢遊仙境2', year: '2016', posters: {thumbnail: 'http://pic.spider.com.cn/pic//filmpic/jdt/1462936153362_mobile2.jpg'}},];

3.組件渲染

DemoProject相當於一個組件

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.樣式

定義組件和組件內控制項的樣式，

var styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    thumbnail: {        width: 53,        height: 81,    },});

5.註冊組件為程式入口

AppRegistry.registerComponent('DemoProject', () => DemoProject);

修改樣式

改成下面這樣的布局

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

增加三個樣式和修改container的樣式

container: {    flex: 1,    flexDirection: 'row',    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  }, rightContainer: {    flex: 1,  },  title: {    fontSize: 20,    marginBottom: 8,    textAlign: 'center',  },  year: {    textAlign: 'center',  },

把return內容改為如下：

 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重新整理，效果如下

這個相當於給react native啟動並執行web server端，不能關閉，如果關閉會模擬器提示 Could not connect to development server的。
如果不小心關閉了，運行這個命令可以啟動

npm start

先寫到這，一篇太長的話，會讓人缺乏看下去的勇氣。
這騙其實就是官網教程的一個簡版和細化我認為比好的細節的版本。喜歡的同學可以直接存取官網學習：
http://facebook.github.io/react-native/docs/tutorial.html