美文网首页React NativereactReact Native
React Native实战系列第三篇 — 项目初始化配置

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

作者: 撩课_叶建华 | 来源:发表于2017-05-20 18:28 被阅读687次

    一、创建React Native工程

    react-native init  AHelloWorld
    
    • 终端执行上述命令后,开始自动创建相应React工程文件,如下图所示:
    工程文件目录

    二、运行React Native工程

    • iOS程序和Android程序一启动,就会加载index.android.jsindex.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.jsindex.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和资料发放!

    相关文章

      网友评论

      本文标题:React Native实战系列第三篇 — 项目初始化配置

      本文链接:https://www.haomeiwen.com/subject/xmypxxtx.html