iOS拓展：react-native入门从小项目开始

发表于 | 分类于 |

react.png

前言&目录

前两篇文章主要介绍了react-native的集成方法，本篇文章主要记录react-native的使用，包括：
1.原生控制器添加react-native视图
2.js向原生系统传值或事件
3.原生系统向js传值或事件

一、原生控制器添加react-native视图

第一个使用例子很简单，说下要求：想要实现主控制器为原生控制器，点击后push到下一个控制器显示的是react-native视图。
新建一个集成react-native后的项目，并新建两个控制器。既然要在第二个控制器中放上react-native视图，那么前面的代码都以往的开发一样。
设置主视图

1
2
3
4
5
6
7
8
//  AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:[[ViewController alloc] init]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

第一个控制器设置跳转

1
2
3
4
5
//  ViewController.m
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self.navigationController pushViewController:[[NextViewController alloc] init] animated:YES];
}

而在第二个控制器上放上加载js的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//  NextViewController.m
- (void)viewDidLoad
{
    [super viewDidLoad];

    self.title = @"第二个VC";
    
    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"NewRN"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    rootView.frame = self.view.bounds;
    [self.view addSubview:rootView];
}

这样就实现了想在哪使用react-native就在哪使用。
效果：

效果一.gif
（ps：react-native的界面暂时不管）

二、js向原生系统传值或事件

数据传递

下面要实现的是，通过js向原生的程序传递数据。比如js里面的字符串要让程序打印出来。
下面开始实现：
新建一个继承NSObject且遵循RCTBridgeModule协议的类，这里命名为HelloWorld。

1
2
3
4
5
//  HelloWorld.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface HelloWorld : NSObject <RCTBridgeModule>
@end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//  HelloWorld.m
#import "HelloWorld.h"
#import <UIKit/UIKit.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTConvert.h>

@implementation HelloWorld
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
    NSLog(@"%@", str);
}

RCT_EXPORT_METHOD(sendArray:(NSArray *)arr)
{
    NSLog(@"%@", arr);
}

RCT_REMAP_METHOD(sendParas, num:(nonnull NSNumber *)num str:(NSString *)str arr:(NSArray *)arr)
{
    NSLog(@"%@ %@ %@", num, str, arr);
}

为了实现RCTBridgeModule协议，需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在js中访问这个模块的名字。如果你不指定，默认就会使用这个类的名字。
通过RCT_EXPORT_METHOD()宏来实现js调用的oc方法。也就是说，在宏中声明一个方法，js中能获取到这个方法，并且调用，从而向原生传值。
下面是js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
//  js
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  NativeModules,
  Image
} from 'react-native';


export default class NewRN extends Component {


  StrOnPress()
  {
                let HelloWorld = NativeModules.HelloWorld;
                HelloWorld.sendStr('这是传过来的字符');
  }

  ArrOnPress()
  {
               let HelloWorld = NativeModules.HelloWorld;
               var array = new Array()
               array[0] = "this"
               array[1] = "is"
               array[2] = "array"
               HelloWorld.sendSomeThing(array);
  }
  parasOnPress()
  {
               let HelloWorld = NativeModules.HelloWorld;
               var array = new Array()
               array[0] = "this"
               array[1] = "is"
               array[2] = "array"
               HelloWorld.sendParas(2, '传过来的字符', array);
  }

  render()
  {
    return (
      <View style={styles.container}>
        <View style={{marginTop:10}}>
            <Button onPress={this.StrOnPress.bind(this)} title="传递字符" />
        </View>
        <View style={{marginTop:10}}>
            <Button onPress={this.ArrOnPress.bind(this)} title="传递数组" />
        </View>
        <View style={{marginTop:10}}>
            <Button onPress={this.parasOnPress.bind(this)} title="多参数按钮" />
        </View>
      </View>
    );
  }
}

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('NewRN', () => NewRN);

可以拿出一个来看：

1
2
3
4
// rn控件并添加响应
<View style={{marginTop:10}}>
       <Button onPress={this.StrOnPress.bind(this)} title="传递字符" />
</View>

1
2
3
4
5
6
// js响应方法
  StrOnPress()
{
                let HelloWorld = NativeModules.HelloWorld;
                HelloWorld.sendStr('这是传过来的字符');
}
1
2
3
4
5
// oc方法
RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
    NSLog(@"%@", str);
}

通过代码可以看到通过点击rn的按钮执行StrOnPress()方法，然后获取到HelloWorld类的sendStr方法，并调用，然后就会打印出来。
效果：

效果二.gif

响应事件

如果当点击rn中的按钮时，想要再跳到下一个控制器，该怎么做。
我试过给当前这个HelloWorld添加了协议，让第二个控制器遵守协议，当点击按钮时控制器实现协议方法，在协议方法中跳转，但是失败了。
也试过给HelloWorld添加block，并在block中跳转，也失败了。
失败的原因在于，在控制器中初始化HelloWorld的实例和在

1
2
3
4
RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
    NSLog(@"%@", str);
}

方法中获得的self实例不是同一个。
目前能想到的方法是，直接在这个HelloWorld类中实现跳转。

1
2
3
4
5
6
7
8
RCT_EXPORT_METHOD(sendStr:(NSString *)str)
{
    NSLog(@"%@", str);
    UINavigationController *nav = (UINavigationController *)[UIApplication sharedApplication].keyWindow.rootViewController;
    UIViewController *vc = [[UIViewController alloc] init];
    vc.title = str;
    [nav pushViewController:vc animated:YES];
}

三、原生系统向js传值或事件

要实现的是js传递两个数给原生，原生判断大小并返回结果。
代码：

1
2
3
4
5
6
7
RCT_REMAP_METHOD(compare, num1:(nonnull NSNumber *)num1 num2:(nonnull NSNumber *)num2 callback:(RCTResponseSenderBlock)callback)
{
    NSString *result;
    result = num1>num2 ? @"num1大于num2" : @"num1不大于num2";
    NSArray *events = [NSArray arrayWithObjects:result,nil];
    callback(@[[NSNull null], events]);
}

1
2
3
4
5
6
7
8
9
10
11
compareOnPress()
{
  let HelloWorld = NativeModules.HelloWorld;
  HelloWorld.compare(2, 3, (err, res) => {
    alert(res);
  });
}

      <View style={{marginTop:10}}>
          <Button onPress={this.compareOnPress.bind(this)} title="比较按钮" />
      </View>

效果：

效果三.gif
这里是通过RCTResponseSenderBlock来实现回调的。

再放一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
RCT_REMAP_METHOD(printDate, date1:(nonnull NSNumber *)d1 date2:(nonnull NSNumber *)d2 event:(RCTResponseSenderBlock)callback)
{
    NSString *resultStr;
    NSDate* dt1 = [RCTConvert NSDate:d1];
    NSDate* dt2 = [RCTConvert NSDate:d2];
    NSComparisonResult result = [dt1 compare:dt2];
    if (result==NSOrderedAscending) {
        resultStr = @"比较结果:开始时间小于结束时间";
    } else {
        resultStr = @"比较结果:开始时间大于结束时间";
    }
    NSArray *events = [NSArray arrayWithObjects:resultStr,nil];
    callback(@[[NSNull null], events]);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Button,
    DatePickerIOS,
    NativeModules
} from 'react-native';

export default class NewRN extends Component {
    constructor(){
      super();
      this.state = {startDate: new Date(), endDate: new Date()};
    }
    onPressDateValidation() {
      var HelloWorld = NativeModules.HelloWorld;
      HelloWorld.printDate(this.state.startDate.getTime(), this.state.endDate.getTime(), (err, res) => {
        alert(res);
      });
    }
    onStartDateChange(date) {
      this.setState({startDate: date});
    }
    onEndDateChange(date) {
      this.setState({endDate: date});
    }
    render() {
            return (
          <View style={{marginTop:40}}>

            <DatePickerIOS
              date={this.state.startDate}
              mode='date'
              onDateChange={this.onStartDateChange.bind(this)} />
            <DatePickerIOS
              date={this.state.endDate}
              mode='date'
              onDateChange={this.onEndDateChange.bind(this)} />
            <Button onPress={this.onPressDateValidation.bind(this)} title="Compare" />

          </View>
            );
    }
}

AppRegistry.registerComponent('NewRN', () => NewRN);

效果：

效果四.gif

完

请我吃一块黄金鸡块
Powered By Valine
v1.5.2