react-native结合react-navigation之TabNavigator

最新推荐文章于 2025-10-30 19:38:26 发布

转载最新推荐文章于 2025-10-30 19:38:26 发布 · 728 阅读

文章标签：

#react-navigation #react-native #f #t

react-native 同时被 2 个专栏收录

5 篇文章

订阅专栏

React

4 篇文章

订阅专栏

本文详细介绍如何使用 React Native 的 TabNavigator 和 StackNavigator 实现页面间的切换与导航，并解决了导航过程中遇到的一些具体问题。

react-native开发需时肯定有tab的切换，或者页面的转调，当然用RN自身的Navigator 也可以但是也不是那么方便react-navigation 就能满足很多大部分需求，如下图的三种切换方式，下面就说下TabNavigator 和StackNavigator的应用，才踏的一个坑，还是太年轻呀，横刀一撸！！！！

主要的界面用tab 切换即是TabNavigator，切换如下图

一共四个页面当然配置就如下咯

// 两个参数 routeConfigs: NavigationRouteConfigMap, config: TabNavigatorConfig = {}
// 一个route对应的页面和tab图标，一个切换的样式整个tab栏的样式
//tab
export const AppNavigator = TabNavigator({
Hotshow: {screen: hotshow, navigationOptions: {
tabBarLabel: '热映',
tabBarIcon: ({ tintColor, focused }) => (
<Image resizeMode='contain'
source={require('../icon/icon_hot.png')}
style={[style.footImage, {tintColor: tintColor}]}
/>
)
}},
Usshow: {screen: usshow, navigationOptions: {
tabBarLabel: '北美',
tabBarIcon: ({ tintColor, focused }) => (
<Image style={[style.footImage, {tintColor: tintColor}]}
resizeMode='contain'
source={require('../icon/icon_us_normal.png')}
/>
)
}},
Soonshow: {screen: soonshow, navigationOptions: {
tabBarLabel: '近期',
tabBarIcon: ({ tintColor, focused }) => (
<Image style={[style.footImage, {tintColor: tintColor}]}
resizeMode='contain'
source={require('../icon/icon_soon_normal.png')}
/>
)}
},
Nearcinemas: {screen: nearcinemas, navigationOptions: {
tabBarLabel: '影院',
tabBarIcon: ({ tintColor, focused }) => (
<Image style={[style.footImage, {tintColor: tintColor}]}
resizeMode='contain'
source={require('../icon/icon_near_normal.png')}
/>
)},
}
}, {
tabBarPosition: 'bottom',
lazy: true, // 是否懒加载
initialRouteName: 'Hotshow',
tabBarOptions: {
showIcon: true,
pressOpacity: 0.8,
style: {
height: 45,
backgroundColor: '#ffffff',
zIndex: 0,
position: 'relative'
},
labelStyle: {
fontSize: 11,
paddingVertical: 0,
marginTop: -4
},
iconStyle: {
marginTop: -3
},
tabStyle: {
backgroundColor: 'rgb(230,69,51)',
},
}
});

TabNavigatorConfig更多具体的参数如下

/**
* Tab Navigator
*/
export interface TabNavigatorConfig {
tabBarComponent?: React.ReactElement<any>,
tabBarPosition?: 'top'|'bottom',
swipeEnabled?: boolean,
animationEnabled?: boolean,
lazy?: boolean,
tabBarOptions?: {
activeTintColor?: string,
activeBackgroundColor?: string,
inactiveTintColor?: string,
inactiveBackgroundColor?: string,
showLabel?: boolean,
style?: ViewStyle,
labelStyle?: TextStyle,
// Top
showIcon?: boolean,
upperCaseLabel?: boolean,
pressColor?: string,
pressOpacity?: number,
scrollEnabled?: boolean,
tabStyle?: ViewStyle,
indicatorStyle?: ViewStyle
}
initialRouteName?: string,
order?: string[],
paths?: any // TODO: better def
backBehavior?: 'initialRoute'|'none'
}

如上都配置好了，就需要在屏幕上显示，下面代码作为展示主要的还是创建了AppWithNavigationState 然后export 出他，在root下调用

class AppWithNavigationState extends Component {
render() {
return(
<View style={{flex: 1}}>
{this.props.fetchbool ? <Loading/> :
<AppNavigator navigation={
addNavigationHelpers({dispatch: this.props.navigator,
state: this.props.nav})
}/>
}
</View>
)
}
}
function mapStateToProeps(state){
return {
fetchbool: state.fetchload.data,
nav: state.nav
}
};
function macthDispatchToProps(dispatch) {
return bindActionCreators({
navigator: navigator,
initHotshowAction: initHotshow,
fetchLoading: fetchLoading
}, dispatch);
}
let style = StyleSheet.create({
footImage: {
width: 25,
height: 25
},
});
export default connect(mapStateToProeps, macthDispatchToProps)(AppWithNavigationState);