一. 开发环境搭建 中文网站
- 原理
- 袁峥Seemygo
- 深入理解React Native页面构建渲染原理
- 知识库
- React Native 组件的生命周期
- CSDN
- 贾鹏辉的技术博客 → github
- 打包与热跟新
- React Native通信机制详解
- React Native 从入门到原理
打开reactnative项目：
方法一： 根目录npm start之后打开ios项目 run
方法二：根目录react-native run-ios
方法三: VSCode 调试Debug ios
二. 插件
1. React Native Tools插件，支持代码高亮、debug以及代码提示等十分强大的功能
2. 代码智能提示
typings: 基于typescirpt的接口文件, 实现代码智能提示
- 安装typings:
npm install typings -g
- 安装
React和react-native的接口说明文件：
在项目根目录
typings install dt~react --save
typings install dt~react-native --save
3.文件目录补全
Path Intellisense
4. 语法高亮 babel
支持ES6、React.js、jsx代码语法高亮。
安装
command+shift+p -> install package -> babel
配置
该插件不需要额外配置，在打开.js或.jsx后缀的文件，直接选择Babel为对应的语法就可以了。
也可一劳永逸： 打开.js或.jsx后缀的文件 view -> Syntax -> open all with...->babel
5.插件推荐
为了开发的便捷，我还推荐以下插件：
Auto Close Tag自动闭合标签Auto Rename Tag自动重命名标签，配合上面的插件使用，基本上能赶上IntelliJ IDEA系的功能了React-Native/React/Redux snippets for es6/es7代码提示，如componentWillMount方法可以通过cwm直接获得
常用命令
npm i react-native-tab-navigator --save安装库
三.知识点
-
Platform设备信息Platform.OS === 'ios'
返回不同的组件
var Component = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();
style:
import { Platform, StyleSheet } from 'react-native';
var styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),},});
Navigator is deprecated and has been removed from this package.
npm install --save react-navigation```
- npm start后 端口占用
ERROR Packager can't listen on port 8081
Most likely another process is already using this port
Run the following command to find out which process:
lsof -i :8081
Then, you can either shut down the other process:
kill -9 <PID> //kill -9 11098
