原文发布于CSDN，地址：查看原文
在现阶段我们的RN实践都是基于已发布过的APP，譬如将从某个入口进入的子模块都替换成RN页面。那么我们可以将这个子模块设计成一个通用RN容器，所有的RN页面都在RN容器内部跳转。
RN容器在iOS使用UIViewController、Android使用Activity或者Fragment，加载bundle文件，正常情况下，一个模块只有一个bundle文件。
要实现页面的跳转，我们可以使用Navigator组件，具体使用可以参考：http://blog.csdn.net/codetomylaw/article/details/52059493
还有几个问题需要解决：
1、导航栏
在原生App中导航栏通常是统一管理的，那么在通用容器中，我们可以定义一个通用的RN导航。
2、Native跳转RN容器
使用正常的Native跳转方式即可，譬如在Android中 startActivity 。
3、RN容器返回Native界面
由于导航栏已经是RN界面编写的，那么Native端就需要提供一个桥接的方法给RN调用，桥接方法需要实现的逻辑：finish掉初始化的RN容器
4、处理安卓系统返回键
详细见Demo代码
好，我们通过一个简单的Demo来演示。
我们实现的效果是
1、从Native页面跳转RN页面A，RN页面A是由RN容器加载，点击左上角可以返回到Native界面
2、点击RN页面A中的“跳转详情”可以跳转到RN页面B
3、点击RN页面B中的左上角或安卓物理返回键，可以返回到RN页面A
4、点击RN页面B中的左上角或安卓物理返回键，可以阻断页面的返回，实现我们自己的逻辑
5、点击RN页面B中的分享，可以调用回调
页面A如下图：
页面B如下图:
导航组件代码如下：Nav.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
Platform,
NativeModules,
} from 'react-native';
const {CommonDispatcher} = NativeModules;
//通用导航组件
export default class Nav extends Component {
constructor(props) {
super(props);
height = (Platform.OS === 'ios') ? 64 : 45;
leftWidth = 60;
rightWidth = 60;
}
//控制返回事件，navigator返回 或 返回到原生页面
back() {
const { navigator } = this.props;
if(navigator) {
const routers = navigator.getCurrentRoutes();
if (routers.length >1) {
navigator.pop();
}else{
//此处为桥接，需要finish 掉RN壳，跳转到原生页面
CommonDispatcher.toBack({});
}
}
}
//左上角事件
leftCallBack() {
if (this.props.leftCallBack) {
this.props.leftCallBack();
}else {
this.back();
}
}
//右上角事件
rightCallBack(){
if (this.props.rightCallBack) {
this.props.rightCallBack();
}
}
render() {
//左边返回图片可隐藏
let leftView = this.props.hiddenBack ?
<View style={styles.leftView} />
:(
<TouchableOpacity onPress={this.leftCallBack.bind(this)}>
<View style={styles.leftView}>
<Image source={{uri:"nav_back"}} style={styles.image}/>
</View>
</TouchableOpacity>);
//标题现在只支持文本，样式后续也可支持修改
let centerView = <Text style={styles.title}>{this.props.title}</Text>;
//右上角区域目前只支持文本，后续可支持图片或图文
let rightView = (
<TouchableOpacity onPress={this.rightCallBack.bind(this)}>
<Text style={styles.rightTitle}>{this.props.rightTitle}</Text>
</TouchableOpacity>);
return (
<View style={styles.container} height={height} backgroundColor={this.props.backgroundColor}>
<View style={styles.leftView} width={leftWidth} >{leftView}</View>
<View style={styles.centerView} >{centerView}</View>
<View style={styles.rightView} width={rightWidth} >{rightView}</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent:'space-between',
flexDirection:'row',
alignItems:'center',
paddingTop:(Platform.OS === 'ios') ? 20 : 0,
},
leftView:{
flexDirection:'row',
alignItems:'center',
},
rightView:{
flexDirection:'row',
alignItems:'center',
justifyContent:'flex-end',
},
centerView:{
flex:1,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
},
image: {
marginLeft:20,
width:15,
height:15,
},
title: {
fontSize:17,
color:'#ffffff',
},
rightTitle: {
marginRight:15,
color:'white'
},
});
容器组件代码如下（HomePage也就是RN页面A）：page.js
'use strict';
import React, { Component } from 'react';
import {
Platform,
Navigator,
BackAndroid,
NativeModules,
View,
Text,
AppRegistry,
TouchableOpacity,
} from 'react-native';
import Nav from './Nav.js';
import DetailPage from './DetailPage';
const {CommonDispatcher} = NativeModules;
export default class PageIndex extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
if (Platform.OS === 'android') {
//监听安卓物理按键返回
BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
}
}
//处理安卓物理back键
onBackAndroid = () => {
let nav = this.navigator;
let routers = nav.getCurrentRoutes();
// 当前页面不为root页面时的处理
if (routers.length >1) {
let top = routers[routers.length - 1];
let handleBack = top.handleBack;
if (handleBack) {
// 路由或组件上决定这个界面自行处理back键
handleBack();
return true;
}
// 默认处理
nav.pop();
return true;
}
return false;
};
render() {
return (
<Navigator
ref={ nav => { this.navigator = nav; }}
initialRoute={{ name: "HomePage", component: HomePage }}
configureScene={(route) => {
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);
}
}
//这是一个使用了通用导航的测试页面
class HomePage extends Component {
toDetailPage(){
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'DetailPage',
component: DetailPage,
params:{
rightTitle:"分享"
}
})
}
}
render(){
return (
<View style={{flex:1}}>
<Nav {...this.props} ref='nav' title='通用导航Home' backgroundColor='#e6454a'/>
<TouchableOpacity onPress={this.toDetailPage.bind(this)} style={{backgroundColor:'#f2f2f2',marginTop:20,justifyContent:'center',alignItems:'center',}}>
<Text style={{fontSize:28,color:'#998462',textAlign:'center',}}>跳转详情</Text>
</TouchableOpacity>
</View>
);
}
}
AppRegistry.registerComponent('你自己的模块名', () => PageIndex);
RN页面B代码如下：DetailPage.js
'use strict';
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
import Nav from './Nav.js';
export default class DetailPage extends Component {
constructor(props) {
super(props);
let navigator = this.props.navigator;
if (navigator) {
let routes = navigator.getCurrentRoutes(); //nav是导航器对象
let lastRoute = routes[routes.length - 1]; // 当前页面对应的route对象
lastRoute.handleBack = this.leftCallBack.bind(this);//设置route对象的hanleBack属性
}
}
/**
* 场景：编辑页面，点击物理或左上角返回，需要提示“确定放弃修改吗？”
*/
leftCallBack(){
let logic = false;//你可以修改为true
if(logic){
alert("我不想返回");
}else{
this.refs.nav.back();
}
}
render(){
return (
<View style={{flex:1}}>
<Nav {...this.props} ref='nav' leftCallBack={this.leftCallBack.bind(this)} rightCallBack={()=>{alert('分享')}} title='通用导航Detail' backgroundColor='#e6454a'/>
<View style={{flex:1,backgroundColor:'#f2f2f2',justifyContent:'center',alignItems:'center',}}>
<Text style={{fontSize:28,color:'#998462',textAlign:'center',}}>我只是容器里的一个RN页面</Text>
</View>
</View>
);
}
}
好，这样就基本实现了通用的RN容器和导航，当然还有一些地方可以优化。
《React-Native系列》前42篇博文见http://www.jianshu.com/p/34ef5d19ea12
网友评论