React Native 開發之 (04) 例子講解

 一.了解index.ios.js

　　React-Native就是在開發效率和用戶體驗間做的一種權衡。React-native是使用JS開發，開發效率高、發布能力強，不僅擁有hybrid的開發效率，同時擁有native app相媲美的用戶體驗。讓我們使用以下react native命令生成一個項目。

react-native init demo --verbose

　　現在讓我們用編輯器打開index.ios.js文件，分析代碼結構：

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

class demo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

1 導入模塊

　　第一句：import React, { Component } from 'react';
　　使用import引入模塊，相當於java的import和c++的#include。在ES5里，如果使用CommonJS標准，引入React包基本通過require進行，代碼類似這樣：

//ES5
var React = require("react-native");
var {
    Image,
    Text,
    PropTypes
} = React;  //引用不同的React Native組件

在ES6里，import寫法更為標准

//ES6
import React, {
    Image,
    Text,
    PropTypes
} from 'react-native';、

2 批量定義組件　　

　　第二句代碼，批量定義組件：

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

3 定義組件

　　構建項目的入口類。在ES6里，通過定義一個繼承自React.Component的class來定義一個組件類。里面的render方法就是渲染視圖用的。return返回的是視圖的模板代碼。其實就是JSX的模板語法。

class demo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
           Hello React Native.
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

4 定義組件的屬性類型和默認屬性

　　相對於web開發，需要提供視圖的樣式，那么StyleSheet.create就是干這件事的，只是用JS的自面量表達了css樣式。在render方法返回的視圖模板里已經體現出來了，即style={styles.container}.其中style是視圖的一個屬性，styles就是是定義的樣式表，container是樣式表中的一個樣式。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10 ,
    color: 'red'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

5 注冊應用入口

　　最后將APP組件demo渲染到容器中。

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

 
資料參考：
http://www.cnblogs.com/bennman/p/5301320.html