前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
如果喜欢我的文章，可以关注我微博:袁峥Seemygo
ReactNative之主流架构搭建
- 无论是iOSApp，还是安卓App,很多App都有同样一种界面结构，上面有个导航条，下面有个TabBar条.
- 比如网易新闻界面.
- 在iOS中，是用TabbarController+导航控制器实现，因此RN也是一样.
- 在iOS中，TabbarController中包装导航控制器就能实现.
- 在RN中，TabBar包装导航，会有个一个问题，跳转的时候，底部条隐藏不了，但是通常跳转的时候，都需要隐藏底部条.
<TabNavigator>
<TabNavigator.Item
selected={this.state.selecedIndex == 0}
title="首页"
renderIcon={() => <Image source={{uri:'tabbar_icon_news_normal'}} style={styles.tabIconStyle}/>}
renderSelectedIcon={() => <Image source={{uri:'tabbar_icon_news_highlight'}} style={styles.tabIconStyle}/>}
onPress={() => {
this.setState({
selecedIndex:0
})
}}>
<NavigatorIOS initialRoute=
{{
component:XMGHome,
title:'首页',
}}
style={{flex:1}}
/>
</TabNavigator>
- 实现效果
(非主流)未跳转.png
(非主流)跳转.png
ReactNative主流界面搭建
导航控制器包装TabBar就可以了，先搞个导航，在弄个tabBar
原理：其实切换，是直接把tabBar整个界面切换掉，所以底部条就没有了
有个注意点，TabBar里面的子控件没有navigation
主界面（导航）
render() {
return (
<NavigatorIOS initialRoute=
{{
component:XMGMain,
title:'首页',
}}
style={{flex:1}}
/>
);
}
- XMGMain:Tabbar界面
<TabNavigator>
<TabNavigator.Item
selected={this.state.selecedIndex == 0}
title="首页"
renderIcon={() => <Image source={{uri:'tabbar_icon_news_normal'}} style={styles.tabIconStyle}/>}
renderSelectedIcon={() => <Image source={{uri:'tabbar_icon_news_highlight'}} style={styles.tabIconStyle}/>}
onPress={() => {
this.setState({
selecedIndex:0
})
}}>
{/*一定要记得传navigator给子组件,否则子组件拿不到*/}
<XMGHome navigator={this.props.navigator}/>
</TabNavigator.Item>
</TabNavigator>
- 实现效果
主流(未跳转).png
主流(跳转).png
