React Native实战系列第三篇 — 项目初始化配置

一、创建React Native工程

react-native init  AHelloWorld

• 终端执行上述命令后，开始自动创建相应React工程文件，如下图所示：

工程文件目录

二、运行React Native工程

• iOS程序和Android程序一启动，就会加载index.android.js和index.ios.js这两个文件，实例化组件，并显示到界面上。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
// 1. 从react中加载React、Component 组件
import React, { Component } from 'react';

// 2.从react-native中加载原生组件
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

// 3.自定义组件类,  export default作为默认输出组件类
export default class AHelloWorld extends Component {
  // 3.1 实例化组件方法，用于渲染组件
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.intro}>
          大家好，我是旋之华！
        </Text>
      </View>
    );
  }
}

// 4.创建样式类, 根据每一个样式对象中的描述,创建样式表，并作用于组件
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

// 5. 注册组件,程序入口
// 第一个参数:注册模块名称，一定要工程名保持一致
// 第二个参数:箭头函数，调用上面组件类
AppRegistry.registerComponent('AHelloWorld', () => AHelloWorld);

• index.android.js和index.ios.js内部代码分析：
  • React是默认组件，Component是非默认组件，都在node_modules的react文件夹中。
  • AppRegistry,StyleSheet,Text,View是原生组件，在node_modules下的react-native文件夹中

三、ReactNative中ES6语法使用分析

• 箭头函数

  a => a + a; 

就相当于：

function (a) {
    return a * a;
}

• 箭头函数相当于匿名函数，并且简化了函数定义；

• 注意：如果要返回一个对象，又是单表达式，这么写的话会报错：

  a => { name: a }
  

• 因为和函数体的{ ... }有语法冲突，所以要改为：

a => ({ foo: a })

• 此外，箭头函数内部的this是词法作用域，由上下文确定，所以不再需要以前的那种hack写法：

var that = this;

• 在ReactNative中，调用表达式、对象、字典的时候都需要用{}包住，比如：

<View style={styles.container}>

在JSX语法中，使用变量也需要用{}包住，比如：

var name = "旋之华";
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>{name}</Text>
      </View>
    )

如果直接是字典时，需要用到{{...}}，比如：

<Text style={{fontSize: 20, textAlign: 'center', margin: 10}}>
 描述文本样式
</Text>

• 为了避免与函数体的{ ... }有语法冲突，凡是返回JSX语句的全部用小括号包裹：

<Text style={{fontSize: 20, textAlign: 'center', margin: 10}}>
描述文本样式
</Text>

长按图片-->识别图中二维码

近期正在把公众账号的文章转移到简书，如果要了解第一动态，请关注我的微信公众账号号，带你从零到一的进行React Native开发实战，在其他文章中会有对应的code和资料发放！