ReactNative 简史，让你快速了解上手

每日一言：如果你简单，这个世界就对你简单。

欢迎一起讨论和学习，QQ：732258496  QQ群：478720016

      复杂的事情简单化。中国画（水墨画）和欧洲（油画）比，最大特点就是回归本质。知其然，知其所以然。在此利用一点时间把之前项目中用到ReactNative，和自己的想法和思路总结了出来，共大家参考，一起学习和进步。

                                                                         （效果界面）

一.ReactNative运行环境

    下图说明：

     1.Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行。

     2.Node.js使用事件驱动的非阻塞I / O模型，使其轻量且高效，是一个运行环境，就是JS的一个编译环境。

     3.npm（全称 Node Package Manager，即“node包管理器”）是Node.js默认的、以JavaScript编写的软件包管理系统会随着Node.js自动安装。

     4.yarn 快速可靠和安全的依赖关系管理，Yarn是 Facebook 提供的替代 npm 的工具（ReactNative出自Facebook）可靠和安

     5.其他文章参考    Node.js是用来做什么的？

 

二.ReactNative用到的工具利器

三.ReactNative  / 原生 / HTML5对比

      参考文章：H5、React Native、Native应用对比分析

                        原生、混合、react-native应用对比分析

四.ReactNative与Android原生之间的通讯

     1.精选文章    React Native与Android原生通信

     2.Android系统为我们提供了webview来加载网页，为了让webview加载的网页可以与App交互，系统提供了一套机制帮助我们更方便的实现通信。同样为了实现React Native与原生App之间的通信，FaceBook也实现了自己的一套交互机制。

     3.精选文章，一看就懂

五.ReactNative项目结构

名称	功能描述
_ test _	测试文件夹
android	Android文件所在目录，包含AndroidStudio项目环境文件
iOS	iOS文件所在目录，包含XCode项目环境
node_moules	基于node文件依赖系统产生的相关依赖和第三方lib
watchmanconfig	Watchman的配置文件，Watchman用于监控文件变化
flowconfig	flow的配置文件，flow用于静态代码检查
buckconfig	buck的配置文件，buck是Facebook开源的高效编译系统
index.js	Android和IOS程序入口文件（最新版）
package.json	项目基本信息以及依赖信息

六.ReactNative使用 (截取部分代码，详细见demo)

     1.导入ReactNative包，导入ReactNative组件

import React from "react";
import {
    Button,
    Platform,
    StyleSheet,
    Text,
    TextInput,
    View
} from 'react-native';

     2.创建ReactNative组件

export default class LoginScreen extends BaseScreen {
    constructor(props) {
        super(props);
        this.state = {text: instructions};
    }

    render() {
        return (
                <Button
                    title="进 入 主 页"
                    color={Colors.blue}
                    onPress={() => {
                        this.props.navigation.navigate("Main")
                    }}
                />
        );
    }
}

     3. StyleSheet.create创建样式实例 ，在应用中只会贝创建一次，不用每次在渲染周期中重新创建

const styles = StyleSheet.create({
    textInput: {
        flex: 1,
        textAlign: 'center',
    }
});

     4.注册入口组件（index.js）

AppRegistry.registerComponent(appName, () => App);

 

七.项目地址

   RNBaseDemo 地址