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