先附上中文官网的搭建开发环境,其中主要代码是:
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
一:新建名称为xxx的项目
官方创建出来的iOS工程名为AwesomeProject.xcodeproj,打开AwesomeProject文件夹,在IOS子文件夹下即可以看到。如果需要创建新名称为xxx的RN工程,则只需
react-native init xxx
cd AwesomeProject
react-native run-ios
二:运行已有RN项目
由于RN是通过npm来组织项目,所以基本上都使用了第三方的RN控件,其配置保存在项目目录下的package.json文件里,所以通常从网络上取到RN源代码后,运行需如下关键步骤:
- 获取RN源代码:
git clone git@github.com:attentiveness/reading.git
- 进入到项目文件目录执行
npm install
- 进入到项目文件目录执行
react-native run-ios
三:真机调试程序
假设有台Mac,一台iPhone,用xcode可以设置成编译到真机上
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
#ifdef DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.9:8081/index.ios.bundle?platform=ios&dev=true"];
#endif
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"RNForum"
initialProperties:nil
launchOptions:launchOptions];
...
}
这种方式并不是把资源打成包编到真机上,它还是依赖Xcode提供的服务,所以要保证真机和Mac出于同一局域网,设置好正确的IP地址
四:查看iOS的打印log
直接控制台运行react-native run-ios
会启动模拟器,如果报错log会直接显示在模拟器上,无法复制,
那如何查看console.log调试信息以及崩溃时候的错误提示呢?
- 在webstore中需要打印的地方console.log
- 用xcode直接打开项目,运行,即可在控制台中看到