1、npm更新到最新版本
npm install -g npm
2、Command /bin/sh failed with exit code 1
http://blog.csdn.net/a_zhon/article/details/77978383
下载boost_1_63_0.tar.gz:
https://sourceforge.net/projects/boost/files/boost/1.63.0/
3、0.45及以上版本需要下载boost库编译
地址:http://pan.baidu.com/s/1kVDUAZ9
创建低版本RN:react-native init MyApp --version 0.44.3
4、添加RN模块
npm install 模块名
例如:npm install react-native-simple-store
例如:Navigator ========== npm install react-native-deprecated-custom-components --save
例如:TabNavigator ========= npm install react-native-tab-navigator --save
5、更新podfile的文件
新库到更新的版本pod update
使用pod install来安装新的库
6、把RN添加到原生设置
Build Active Acrcheitecture Only设成NO,release 为yes
7、RN和原生交互的声明
原生声明:RCT_EXPORT_MODULE() //宏定义,参数可为外部调用别名,不加则为类名
RN声明:添加NativeModules模块,并创建对象var LoginVC = NativeModules.LoginVC;
RN给原生传值的方法的定义的关键字:RCT_EXPORT_METHOD()
例:RCT_EXPORT_METHOD(login:(NSString *)userName andPassword:(NSString *)password)
原生给RN传值的方法(回调)的定义的关键字:RCT_REMAP_METHOD () //添加rn调用原生的方法,参数为方法名和参数(可为数据类型也可以为回调方法)
例:RCT_REMAP_METHOD(testCallBackEventTwo,resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
例:RCT_EXPORT_METHOD(printf:(NSString*)text){}
回调方法,方法表达式为
(参数)=>{
}
constsubscription = calendarManagerEmitter.addListener('EventReminder', (reminder) =>console.log(reminder.name));...// 别忘了取消订阅,通常在componentWillUnmount生命周期方法中实现。subscription.remove();
8、交互时界面处理
不能直接用self进行视图的处理,地址会变,所以oc中要用单例保存self,且界面切换要在主线程队列中进行
[[NSOperationQueue mainQueue]addOperationWithBlock:^{
[[HomeObject sharedHomeObject].homeVC.rootView removeFromSuperview];
}];
9、警告框
Alert.alert 和alert
Alert.alert 可以显示选项,并定义点击事件,alert只有提示框和确定按钮
Alert.alert('长按','确定长按吗?',
[{text:'取消',onPress:()=>console.log('cancel'),style:'cancel'},
{text:'确实',onPress:()=>console.log('OK')}])}
10、点击处理(RN没有特定的按钮点击事件,使用TouchableXXX)
TouchableWithoutFeedback:点击无视觉效果,常用于视图上点击收回键盘
扩展属性:background====TouchableNativeFeedback.SelectableBackground()、TouchableNativeFeedback.SelectableBackgroundBorderless()、TouchableNativeFeedback.Ripple(color, borderless)
TouchableHighlight:点击背景变暗,常用语定义按钮效果
扩展属性:activeOpacity 被按下时的不透明度
underlayColor 被按下去的颜色
onHideUnderlay 当衬底(也就是上文讲到的最外层的View)被隐藏
onShowUnderlay 当衬底(也就是上文讲到的最外层的View)显示的时候调用。
style View#style
TouchableOpacity:降低按钮透明度,不改变背景颜色
扩展属性:activeOpacity 被按下时的不透明度
主要事件有:onPress点击,onLonPress长按,onPressIn开始点击,onPressOut点击结束
11、全局变量的定义
global.a = 1;
也可以专门写在一个文件当中,调用时,入口文件一次调用(比如index.ios.js文件),全局使用
global.constants = { website:'http://www.baidu.com',
name:'百度',};
12、打包真机运行
React Native的react-native bundle命令是用来进行打包的命令,react-native bundle的详细命令选项https://github.com/facebook/react-native/blob/master/local-cli/bundle/bundleCommandLineArgs.js。
其中我们常使用的一线命令选项:
--entry-file ,ios或者android入口的js名称,比如index.ios.js
--platform ,平台名称(ios或者android)
--dev ,设置为false的时候将会对JavaScript代码进行优化处理。
--bundle-output, 生成的jsbundle文件的名称,比如./ios/bundle/index.ios.jsbundle
--assets-dest 图片以及其他资源存放的目录,比如./ios/bundle
例如:
在项目A文件下ios文件下创建一个bundle的文件夹
cd 项目文件A,输入以下命令
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle
13、react-native下切换运行端口
react-native start --port 9999
.小功能
隐藏界面黄色警告:console.disableYellowBox = true;
收回键盘: Keyboard.dismiss
获取屏幕的宽高: var {width,height} = Dimensions.get('window');