react-native 跳转

Posted on

View 没有点击事件 要换成TouchableOpacity 才有onPress()方法

在rn中很简单

跳转到某个页面的场景有以下几种：
如果我们堆栈中有A>B>C>D>D 5个路由，其中A是第一个页面。

场景一、A>B
1
this.props.navigation.navigate('B')
场景一：C>A，有两种方法：

（1）.可以使用this.props.navigation.popToTop()返回堆栈中的第一个页面。
（2）.可以使用this.props.navigation.navigate(A)返回堆栈中的A页面。

场景三、D>D
1
this.props.navigation.push('D')
场景四、D>C

直接this.props.navigation.goBack()、

示例：

跳转

1
onPress={() => {this.props.navigation.navigate('JobDetail',{ token:item.item.token})}}

接收

1
this.props.navigation.state.params.token

但是 有时候我们还需要他在ios 中做viewController的切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#import <React/RCTBridgeModule.h>
@interface rctJobViewController ()<RCTBridgeModule> //一定要有这个 不然会报错
end
@implementation rctJobViewController
  RCT_EXPORT_MODULE();
  RCT_EXPORT_METHOD(toJobDetail) {
      dispatch_async(dispatch_get_main_queue(), ^{
        rctJobDetailViewController *jobDetail = [[rctJobDetailViewController alloc] init];
        jobDetail.params = params;
        AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
        [(UINavigationController *)app.window.rootViewController pushViewController:jobDetail animated:YES];
       //present view
       // UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:jobDetail];
       //[app.window.rootViewController presentViewController:nav animated:YES completion:nil];
        //pop view
        //UINavigationController *navigationController = (UINavigationController *)[[[[UIApplication sharedApplication] delegate] window] rootViewController];
        //[navigationController popViewControllerAnimated:YES];
      });
  }
end
1
2
3
4
5
6
7
import {NativeModule} from 'react-native';
jumpToDetailWithParams(token) {  
  let params = {"token": token}; 
  let Jobs = NativeModules.rctJobViewController;
  Jobs.toJobDetail(params)                                                                                                            
}    
<TouchableOpacity onPress={() => {this.jumpToNativeWithParams(item.item.token)}/>

warning：module requires main queue setup 在oc里添加

1
+(BOOL)requiresMainQueueSetup{return NO;}

oc 给rn页面传值

1
RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName: @"cvReact" initialProperties:_params launchOptions: nil];//initialProperties 这个后面跟参数

如果做了两个原生页面 加载不同的rn 就需要将setup相关信息再写一套重新嵌入

1
2
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent("jobDetailApp", () => JobDetailApp);