注：本文暂无逻辑

移动端App分类

  • Web(正在用的):

    • 优：开发效率高，成本低，纯前端就能搞定，跨平台
    • 劣：基于Web Dom渲染，运行效率底，用户体验不佳, 本地接口局限

  • Native:

    • 优：用户体验佳，充分使用本地接口

    • 劣：开发效率低(需编译)，成本高，纯前端就能搞定

  • Hybrid

    • 优：js作为native, webview的桥梁，各尽其职

    • 劣：前端与端上开发人员耦合严重，成本高，开发效率低

基础

  1. React 中文 英文
  2. React入门
  3. Redux*(React数据管理)

文档

  1. 中文
  2. 英文

工具

以mac开发Android为例

  1. Android Studio
  2. react-native-cli
  3. Homebrew设置代理
  4. jdk
  5. ...

使用中

  1. React Native将babel内置，无需关心语法兼容问题，随意使用es6/7

  2. 采用flexbox布局

  3. App相当于SPA, Navigator控制路由

  4. iNjnu App
    服务端：node + json web tokens

    • 真机运行截图

  5. 利用git，部署技巧
    每次在本机修改完后端代码，push到github后，如何快速部署?(无需登录服务器)
    后端入口(nodejs)

    var cp = require('child_process')
var p = require('path')
var fs = require('fs')

fs.watch(__dirname, (type, filename) => {
    // 监控js文件修改，修改后重启node服务
    if(!filename.endsWith(".js")) {
        return;
    }
    serverProcess.kill('SIGINT')
    serverProcess = runServer()
})

var serverProcess = runServer()

function runServer() {
    // index.js 是真正的服务端代码入口
    return cp.fork('./index.js', process.argv, {stdio: [0, 1, 2, 'ipc']})
}

    index.js中有下面片段代码

    app.all('/pull', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });
    var ls = require('child_process').spawn('git', ['pull', 'origin', 'master'])
    ls.stdout.on('data', (data) => {
        data = data.toString()
        console.log(data)
        res.write(`${data}`);
    });

    ls.stderr.on('data', (data) => {
        data = data.toString()
        console.log(data)
        res.write(`${data}`);
    });
    ls.on('close', (code) => {
        console.log(`child process exited with code ${code}`)
        res.end(`child process exited with code ${code}`);
    });
})

    push.sh脚本

    #!/usr/bin/env bash

msg="from bash"
if [ -n "$1" ]; then
    msg=$1
fi

git add .
git commit -m "$msg"
git push origin master

# 服务器执行 `git pull origin master`
# 从而更新js代码，继而重启服务器
curl http://202.119.104.195/pull

总结

传统的react native使得前端开发高性能移动端App成为可能。 但距离自由地开发App(需要掌握原生App开发)还有很远，目前本人只停留在jscoach中寻找组件进行开发。 而且！react native的代码检错与报错不太友好。

更多