[React Native]开发记录

• 原生RN混编:

ios:

根据教程:https://reactnative.cn/docs/0.45/integration-with-existing-apps.html#content

所有的步骤都正确,但是最后在ios的项目内不知道什么原因是import不了React的.

现在采取的办法只能是利用react-native自动生成的项目内的ios原生项目(OC)基础上改,因为该项目是OC的,如果用swift需要桥接即可.

需要:

1.如果用swift,则需要用bridge,里面写入#import <React/RCTRootView.h>

然后controller里面直接调用即可:

var root:RCTRootView?

 

2.把xcodeproj里的Main Interface改为你的(新建)Main.storyboad

3.info.plist添加:Main storyboard file base name: Main

这样混编的环境才完整.

• VScode修改代码提示快捷键:

打开Preference->Keyboard shortcut-->Trigger suggest(触发建议),可以修改为option+/

 

• 修改app的进入js:

在index.js,修改

import App from './你想进入的js名称';

 也可以写成:

require('./js/你想进入的js')

 无论import或require,都需要入口页面export出去,有三种方式:

一.类前加export前缀.

二.代码最后加:export default classXX

三.module.exports={classXX}

 

• 路径问题

如果是二级目录,那么在该目录下的页面import进来同级页面,只需要'./xxx'即可

如果想要去上一级或者其他级别目录,则先'../'跳出去

 

• 格式化代码:

安装beautify插件: Mac： Shift + Option + F

• ES6(ES2015):

介绍书籍:http://es6.ruanyifeng.com/#docs/intro

 

•  使用真机调试:

参考:https://reactnative.cn/docs/0.51/running-on-device-ios.html

首先,在xcode xcodeproj内删掉tv-os,tv-os tests的TARGETS,配置好证书签名.

1.混编,从ios跳转RN:首先需要确保设备已使用usb连接至电脑，同时和电脑处在同一wifi网络内,然后将其中的"localhost"改为你的电脑的IP地址

2.纯RN,IOS真机打开:会报错:

Module AppRegistry is not registered callable module (calling runApplication)

奇怪的是模拟器并不会报错,但是真机会报这个,查资料,显示是组件注册问题.除了index.js那里要注册,在组件内也要注册多次.

参考:https://stackoverflow.com/questions/43604603/module-appregistry-is-not-registered-callable-module-calling-runapplication

 

• 执行官网的代码:

官网教程:https://reactnavigation.org/docs/en/tab-based-navigation.html

执行官网例子'Run this code':使用在线的模拟器需要等,可以下载EXPO app(ios&Android),android在Google play,ios app store下载非常慢.Android下载完成后可以通过扫描二维码来把官网的例子运行在本地真机上.非常方便

• 组件依赖问题

package.json类似gradle，里面写依赖。
如果增减依赖，需要重启node server才生效。
如果有依赖问题最终解决不了，可以使用整个node-modules删掉，然后重新运行npm install

• VScode import大坑

注意,改了类名后,VScode会提示是否要auto import这个时候不要选是,因为IDE会把所有js下正常的react-native引用都改了路径,导致报错,要一一改回来.