402's Dojo

React Native入门实例教程 - iOS导航专题

最近一段时间在学习和实践React Native，做一些有趣有用总结和大家分享。这个系列文章可以在这里找到。

使用iOS NavigationBar

当React Native用于已存在的大型项目中时，导航控制器的实现就成了一个比较大的问题：

  1. React Native视图的Navigator，导航效果与native不同，而且会和iOS的右划返回手势冲突；
  2. React Native视图的NavigatorIOS是重新生成一个导航控制器，与主导航间UI不容易统一，行为也不容易统一；
  3. 承载React Native视图的VC在React Native中无法接触到，进而无法退场。
    解决的尝试方案如下：
  4. 将容器VC改成native modules；
  • 问题1，改为native modules之后OC代码如下：
#pragma mark - React Native
RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(backButtonClicked:(id)sender)
{
NSLog(@"RCT back action.");
[self.navigationController popViewControllerAnimated:YES];
}

JS调用代码如下：

// call native method
var BBASkinCenterViewController = require('react-native').NativeModules.BBASkinCenterViewController;
BBASkinCenterViewController.backButtonClicked(null);

方法确实被调用了但是问题也很明显，这个实例是新创建的，并不是我们想要的那个实例。
2. 自定义NatigatorIOS样式；
3. navigator module桥接：

Where to go

React Native入门实例教程 - 调试系统

评论