前言
眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發(fā)捷沸，最近也寫了很多文章，希望讓更多想了解的同學快速上手ReactNative.
如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo
ReactNative之主流架構(gòu)搭建
- 無論是iOSApp遮糖，還是安卓App,很多App都有同樣一種界面結(jié)構(gòu)麻汰，上面有個導航條速客，下面有個TabBar條.
- 比如網(wǎng)易新聞界面.
- 在iOS中，是用TabbarController+導航控制器實現(xiàn)五鲫，因此RN也是一樣.
- 在iOS中溺职，TabbarController中包裝導航控制器就能實現(xiàn).
- 在RN中，TabBar包裝導航位喂，會有個一個問題浪耘，跳轉(zhuǎn)的時候，底部條隱藏不了塑崖，但是通常跳轉(zhuǎn)的時候七冲，都需要隱藏底部條.
<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>
- 實現(xiàn)效果
(非主流)未跳轉(zhuǎn).png
(非主流)跳轉(zhuǎn).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>
- 實現(xiàn)效果
主流(未跳轉(zhuǎn)).png
主流(跳轉(zhuǎn)).png
