RN小笔记

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');

你可能感兴趣的:(RN小笔记)