笔记

技术剖析;

1.基本概念

JSX, components, state, and props

Props

用于构建自定义Component,静态页面

{this.props.name} ｛let｝

  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      
    );
  }

State

In general, you should initialize state in the constructor, and then call setState when you want to change it.

setState

Redux is a predictable state container for JavaScript apps https://redux.js.org/index.html

Style

using camel casing

StyleSheet.create();

ES2015

https://babeljs.io/learn-es2015/

React JSX

http://www.runoob.com/react/react-jsx.html

http://wiki.jikexueyuan.com/project/react-native-lesson/six-jsx-react-native-application.html

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

Component 及其生命周期

https://reactjs.org/docs/react-component.html

React without ES6

https://reactjs.org/docs/react-without-es6.html

组件的生命周期

https://race604.com/react-native-component-lifecycle/

2.环境

改变镜像

https://npm.taobao.org/

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3.工具

*包管理工具

npm --- 非官方

yarn --- facebook(2016年10月11日)开源的一款代替npm的js包管理工具 http://www.jianshu.com/p/f05eabdf3ab6

*Expo

https://expo.io/tools

代码react-native命令行

https://docs.expo.io/versions/latest/guides/exp-cli.html

https://docs.expo.io/versions/latest/index.html

*IDEA/WebStorm 配置React-Native开发环境

①设置js文件默认以jsx语法打开

File->Default Settings->Languages&Frameworks->JavaScript->React JSX

②Download中选择react和React-Native两个

③ 插件

智能提示插件： https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

控制台插件： https://github.com/beansoftapp/react-native-console 支持IDEA、WebStorm、Android Studio Java 8 required to run the IDE.

https://github.com/smuyyh/ReactNativeTools 支持IDEA

*Sublime Text 3 配置

？

4.两种方式创建工程

方式二：

*for Andorid(Window):

前提：

npm install -g react-native-cli

与官方文档中不同的是，两者都需要作为全局安装

创建一个全新的工程

react-native init "工程名称" （获取 React Native 的源代码和依赖包，然后创建工程）

react-native run-android

react-native init calls npm install react-native

支持现有的工程 http://reactnative.cn/docs/0.50/integration-with-existing-apps.html#content

npm init -- 创建package.json文件（属性说明：http://www.runoob.com/nodejs/nodejs-npm.html）

npm install -- 后面需要配置本地react-native

注意事项： npm install 安装的版本可能与package.json中配置的模块的版本不同，需要制定模块的版本（格式 npm install 模块名@版本号）

gradle中配置：

https://www.2cto.com/kf/201610/555228.html

开启一个node服务端（执行react-native run-android会自动开启）

注意：命令行出错的话，可能需要重新打开一个CLI

*for ios

???

5.打出Bundle文件

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src>/main/res/

mate文件未sha1值

http://blog.csdn.net/xu_song/article/details/52870593

6.Hot Reloading

http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html

7.遇到的问题

*react-native android 8081端口被占用问题

http://blog.csdn.net/a944540438/article/details/71627371

*react-native 4048错误：

http://blog.csdn.net/lplj717/article/details/77370857

*其他一些未碰到的问题

http://www.jianshu.com/p/09878813184c

8.Reference

npm模块安装机制简介

http://www.ruanyifeng.com/blog/2016/01/npm-install.html

npm本地安装与全局安装

-g 或者 --global

React教程

http://www.runoob.com/react/react-tutorial.html

React-Native中文网

https://react-native.cn/

极客学院翻译文章：

React Native 官方文档中文版

http://wiki.jikexueyuan.com/project/react-native/

http://wiki.jikexueyuan.com/project/react-native-lesson/

React Native通信机制详解(IOS)

http://blog.cnbang.net/tech/2698/

箭头函数：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

9.开源项目

电商项目：https://github.com/EleTeam/Shop-React-Native

10.issue

React Native for Android is incompatible with 3rd-party 64-bit libraries

http://tech.glowing.com/cn/react_native_practice_on_android/?utm_source=com.tencent.tim&utm_medium=social

11.

12.

13.

14.

15.

React-native调试：
1、如果android模拟器的话，可以在电脑键盘上的按两下R (reload项目)
2、真机调出调试窗口：
（1）手机摇一摇
（2）手机菜单键（某些手机不行）
（3）电脑打开cmd运行 adb shell input keyevent 82
3、连接模拟器方式
夜神模拟器 adb connect 127.0.0.1:62001
逍遥模拟器 adb connect 127.0.0.1:21503

xljx18335908301@outlook.com 's Blog