使用cocoapods 集成react-native 笔记
2017-11-28 15:36
537 查看
1.xcode 新建一个工程 myTestApp
2. 进入工程目录下 新建package.json文件 可以使用sublimb新建
内容为:{
"name": "myTestApp",//工程名
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
3. 命令行 进入工程目录下 cd /Users/holly/Desktop/myTestApp 运行 npm install 或 npm update
4.新建podfile文件 命令行 进入工程目录下 cd /Users/holly/Desktop/myTestApp -->wim podfile -->:wq
-->open podfile 打开podfile,写入:
platform :ios,'9.0'
xcodeproj ‘myTestApp.xcodeproj'
target'myTestApp'do
//# 如果你的RN版本 >= 0.42.0,请加入下面这行
pod'Yoga', :path =>'node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
//node_modules path 就是 以podfile文件路径为基准的路径
pod'React', path:'node_modules/react-native', :subspecs => [
'BatchedBridge',#必须要,不然xcode报错
'Core',
'ART’,#必须要,不然xcode报错
'RCTActionSheet',
'RCTAnimation',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket'
]
end
5.pod install other link flag 加上-lc++
6。建index.ios.js 文件 内容为
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';export default class myTestApp extends Component { render() { return (Welcome to React Native!To get started, edit index.ios.jsPress Cmd+R to
reload,{'\n'}
Cmd+D or shake for dev menu); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions:
{ textAlign: 'center', color: '#333333', marginBottom: 5, },});AppRegistry.registerComponent('myTestApp', () => myTestApp); myTestApp为注册的项目名,与appDelegate.m中的
RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"项目名" launchOptions:launchOptions]; 项目名保持一致,不然会报错
7.生成js.bundle 1、进入项目目录
cd /Users/holly/Desktop/myTestApp
2、打开终端:
npm start
3、使用curl命令生成 main.jsbundle
curl http://localhost:8081/index.ios.bundle -o main.jsbundle
4、在appDelegate.m 用jsCodeLocation = [[NSBundlemainBundle]URLForResource:@"main"withExtension:@"jsbundle"];
2. 进入工程目录下 新建package.json文件 可以使用sublimb新建
内容为:{
"name": "myTestApp",//工程名
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
3. 命令行 进入工程目录下 cd /Users/holly/Desktop/myTestApp 运行 npm install 或 npm update
4.新建podfile文件 命令行 进入工程目录下 cd /Users/holly/Desktop/myTestApp -->wim podfile -->:wq
-->open podfile 打开podfile,写入:
platform :ios,'9.0'
xcodeproj ‘myTestApp.xcodeproj'
target'myTestApp'do
//# 如果你的RN版本 >= 0.42.0,请加入下面这行
pod'Yoga', :path =>'node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
//node_modules path 就是 以podfile文件路径为基准的路径
pod'React', path:'node_modules/react-native', :subspecs => [
'BatchedBridge',#必须要,不然xcode报错
'Core',
'ART’,#必须要,不然xcode报错
'RCTActionSheet',
'RCTAnimation',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket'
]
end
5.pod install other link flag 加上-lc++
6。建index.ios.js 文件 内容为
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';export default class myTestApp extends Component { render() { return (Welcome to React Native!To get started, edit index.ios.jsPress Cmd+R to
reload,{'\n'}
Cmd+D or shake for dev menu); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions:
{ textAlign: 'center', color: '#333333', marginBottom: 5, },});AppRegistry.registerComponent('myTestApp', () => myTestApp); myTestApp为注册的项目名,与appDelegate.m中的
RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"项目名" launchOptions:launchOptions]; 项目名保持一致,不然会报错
7.生成js.bundle 1、进入项目目录
cd /Users/holly/Desktop/myTestApp
2、打开终端:
npm start
3、使用curl命令生成 main.jsbundle
curl http://localhost:8081/index.ios.bundle -o main.jsbundle
4、在appDelegate.m 用jsCodeLocation = [[NSBundlemainBundle]URLForResource:@"main"withExtension:@"jsbundle"];
相关文章推荐
- 使用CocoaPods在现有项目集成React-Native
- IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中
- React-Native傻瓜式学习笔记(一):ListView的简单使用
- React-native开发之图标库react-native-vector-icons 的集成使用
- React Native 学习笔记五(关于样式的使用)
- React-Native学习笔记之:WebView控件使用
- React-native开发之图标库react-native-vector-icons 的集成使用
- jpush-react-native 插件的集成与使用 Android 篇(推送)
- react native 学习笔记 2016_1223 (环境,箭头函数,state设置,图片使用等)
- React Native集成与简单使用(一)
- 使用CocoaPods 将 React Native 导入已有的项目中
- React-Native学习笔记——正确集成到现有Android工程中
- React-Native学习笔记之:弹框框架Popover简单使用
- React-Native学习笔记 使用ListView加载网络数据
- React Native 学习笔记二十(关于ListView的使用)
- React-native 集成 android简单使用
- React Native 学习笔记十五(图片的使用)
- React-Native学习笔记之:使用Tab react-native-tab-navigator框架
- React Native 学习笔记九(ScrollView的使用)
- React Native 学习笔记四(关于state的使用)