调试快捷键
模拟器开启 Hot Reloading & live Reload :
command + D for iOS
command + M for android
Hot Reloading 只能看到UI变化,live Reload 每次都会刷新至初始状态调试工具
react-native-debugger
集redux、UI、ajax 调试于一身react-native-debugger
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(
rootReducer,
initialState,
compose(
createModelPersistence(restoreCb),
createSyncService({ io, server: Config.site, path: '/ws' }),
__DEV__
? composeWithDevTools({})(applyMiddleware(...middlewares))
: applyMiddleware(...middlewares)
)
);
if (__DEV__) {
global.XMLHttpRequest =
global.originalXMLHttpRequest || global.XMLHttpRequest;
}
// 依赖
"react-devtools-core": "3.2.3",
"redux-devtools-extension": "2.13.5"
RN链接第三方库时,需要修改Android和iOS的一些配置
当 react-native link XXX 失效时
https://github.com/wkh237/react-native-fetch-blob/wiki/Manually-Link-PackageRN 模块引入
ReactNative提供了一个关键字@providesModule,可以解决文件路径问题,以后只要有这个关键字,导入组件就可以不需要路径,直接类名就好了
/**
* @providesModule Common
*/
import {
Dimensions
} from 'react-native';
export default class Common {
static bgColor = 'rgb(232,232,232)';
static screenW = Dimensions.get('window').width;
static screenH = Dimensions.get('window').height;
}
// 以前需要这样
// import Common from './../Common/Common'
// 现在可以直接用类名
import Common from 'Common'
- RN 改变端口号
react-native start --port=8082
android模拟器上需要额外设置devSetting,ios模拟器上比较麻烦
-
RN 怎么看错误消息
只用看 unknown 下面的定位信息,定位为 unknown file 的直接跳过,看下一个,一定会有一个定位到你项目中的某个文件的行数
image.png