RN总结

RN总结

iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(1)基本环境

iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(2)集成过程

一个RNDemo(React Native 0.57.3 + ES6)实现(包含RN与原生相互跳转和通信)

iOS原生界面与RN界面互调及传值

1. props和state相关的属性传值

1.1 Props

Props：大多数组件在创建的时候可以使用各种参数来进行定制，用于定制的的这些参数就是Prop,在defaultProps中声明,声明propTypes可以控制属性类型

#例如name属性,就将name属性传递给NewText组件
<NewText name="zhouyu"/>

引用属性

{this.props.name}

总结: 常用与界面间控制器以及父子空间传值,类似于iOS的property属性; 在父组件中指定,在生命周期中不能再改变; 与iOS的区别就是RN使用{}来绑定值,而iOS使用setProperty来处理属性值

特殊属性: this.props.children

用来遍历子组件

说明	属性prop	状态state
能否从父组件获取初始值	YES	NO
能否有父组件修改	YES	NO
能否在父组件设置默认值	YES	YES
能否在组件内修改	NO	YES

1.2 State

State: 一般是数据或者状态存在里面,在constructor构造方法中完成初始化.大部分组件的工作应该是从props里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state.

#初始化某些参数
constructor(props){
   
        super(props);
        this.state={
   
            loaded:false,
        };
        this.fetchData=this.fetchData.bind(this);
}

属性参数数据发生变化时

this.setState({
   
       loaded:true,
});

总结:

1. state的作用就是在一些数据和属性状态发生变化时去更新指定的数据,需要在方法中去调用this.setState来更新数据.
2. state的任何属性改变都会导致页面重新绘制,消耗性能.
   

使用场景: 处理输入事件,网络数据获取,定时更新,消息推送,按钮点击等等

2. FastList和fetch应用

FastList用来替代过时的ListView
Fetch

fetch(myRequest)
    .then(response => {
   
        if (response.status === 200) {
   
              return response.json();
        } else {
   
      		throw new Error('Something went wrong on api server!');
    	 }
    })
    .then(response => {
   
    	  console.debug(response);
         // ...
    }).catch(error => {
   
         console.error(error);
    });

3. 原生与RN互调及传值

3.1 RN跳转原生界面

iOS端:

1. 导入#import <React/RCTBridgeModule.h>.
2. 需要创建一个类遵守RCTBridgeModule协议.
   3.RCT_EXPORT_MODULE() 写调用的方法.

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(openNativeVC) {
   
    dispatch_async(dispatch_get_main_queue(), ^{
   
        AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
        UINavigationController *rootNav = delegate.navigationController;
        ZYViewController *nativeVC = [[ZYViewController alloc] init];
        [rootNav pushViewController:nativeVC animated:YES];
    });
}

RN端:

1. 引入NativeModules模块.
2. 创建nativeModule变量.
3. RN方法中调用对应的函数

var nativeModule = NativeModules.OpenNativeModule;

//跳转到原生界面
jumpToNative() {
   
    nativeModule.openNativeVC()
}