如何在iOS原生项目中集成react-native项目此处不再赘述。
这里简单描述如何在iOS原生项目多个地方进入react-native模块。
或许刚开始在iOS原生项目中集成react-native模块的时候很开心，集成也很简单，但是，有一天，增加需求了，需要在另外一个地方增加一个react-native模块。瞬间懵逼，有木有？如何处理呢？
我们知道，index.ios.js可以看做是iOS模块的入口，但是这个入口似乎只有一个，从这个地方入手的话，似乎不太好处理，反正我是放弃治疗了。
在网上找了一段时间，没有找到合适的方法。于是，我决定自己整个方案出来（或许网上有吧😓）。在此之前，我在做H5项目的时候，后来将页面都改成JSP了，里面有个重定向的知识点，由此得到启发，就有了下面的一个方案。然后呢？于一次异想天开，得出了另一个方案（注册多个组件）。
两种方案都用到了RCTRootView，假设现在需要加载两个react-native模块，一个是Discover，另一个是Profile。
下面分别说说这两个方案：
方案一、注册多个组件
这种方式利用"moduleName"来实现，具体的玩法是这样的：
1、在原生项目中的一个地方，
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"Discover" initialProperties:props
launchOptions:nil];
在另一处
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"Profile" initialProperties:props
launchOptions:nil];
这样就有了两个react-native的入口了。组件名也有了。
2、在react-native中的index.ios.js文件中同时注册两个组件作为两个react-native模块的入口
AppRegistry.registerComponent('Discover', () => Root1);
AppRegistry.registerComponent('Profile', () => Root2);
采用这种方式的好处是：两个react-native模块的代码相对分离，一个进入组件Root1，另一个进入Root2。后面的都是熟悉的玩法了。但是用的node_modules是一套，还是有影响的。
方案二、重定向（重新设置路由）
这种方式利用"initialProperties"来实现，我们事先传入react-native模块路由名，具体的玩法是这样的：
1、在原生项目中，
NSDictionary *props = @{ @"routeName" : self.routeName };
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MyApp" initialProperties:props
launchOptions:nil];
我们在原生项目中传入路由名Discover或Profile（字符串即可）。
2、在react-native项目中，只要在组件将要加载的时候，修改路由即可。
a）、如果用的是较早的导航Navigator组件，这样玩
let initialRoute = null;
export default class App extends Component {
componentWillMount() {
if (this.props.routeName === "Discover") {
initialRoute = Discover;
} else if (this.props.routeName === "Profile") {
initialRoute = Profile;
}
}
render() {
return (
<Navigator
initialRoute={{name: 'initialRouteName', component: initialRoute}}
renderScene={
(route, navigator) => {
_navigator = navigator;
let Component = route.component;
return <Component {...route.params} navigator={navigator}/>
}
}
configureScene={(route) => Navigator.SceneConfigs.HorizontalSwipeJump}
/>
);
}
}
这样以来，就修改了初始化路由，实现了从不同入口进入react-native模块。
b）、如果用的Facebook目前推荐的react-navigation组件，玩法是这样的：
首先，先接收到原生项目传递过来的默认属性值，即routeName，
export default class App extends Component {
render() {
return (
// screenProps 为了传递从原生传递过来的属性给项目的initialRoute
<RoutesConfig screenProps={this.props}/>
);
}
}
其次，创建一个组件专门处理初始化路由
class Redirect extends React.Component {
// 重定向到相应的RN模块
componentWillMount() {
NavigationUtil.reset(this.props.navigation, this.props.screenProps.routeName);
}
render() {
return (
<View />
);
}
}
这里render一个空白页，同样是在componentWillMount() {}中更改初始化路由。重新设置路由的方法在react-navigation中可以查阅。
最后，将Redirect组件作为react-navigation组件的初始化路由。
const RoutesConfig = StackNavigator(
{
Redirect: {
screen: Redirect,
},
Discover: {screen: Discover},
Profile: {screen: Profile},
},
{
initialRouteName: 'Redirect', // 默认显示界面
mode: 'card',
headerMode: 'screen',
cardStyle: {
paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight
},
navigationOptions: ({navigation}) => ({
headerStyle: {
backgroundColor: '#48B4EB'
},
headerTitleStyle: {
color: '#fff',
fontSize: 18
},
headerTintColor: '#fff',
}),
}
);
这种方式在一个空白页处理，虽说是在组件加载之前更改了初始化路由，总归不好。
到此差不多结束了。然而，感觉这两种方式都不是很优秀的解决方案，有更好的方式欢迎补充，在此拜谢！
网友评论