知识点：
1. createStackNavigator
2. createBottomTabNavigator 底部菜单
3. createMaterialTopTabNavigator 顶部菜单
4. Icon菜单图标 react-native-vector-icons
5. 源代码地址：https://github.com/ysb002003/ReactNativeLearning_ReactNavigation
效果图：
代码实现：
1. 导入底部与顶部方法到App.js进行路由配置
import { createStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation';
2. 安装图标组件 https://github.com/oblador/react-native-vector-icons
npm install --save react-native-vector-icons
3. 导航结构：
4. 文件目录结构
5. App.js 路由配置代码：
a. 根路由代码：
const App = createStackNavigator({
WelcomePage: {
screen: WelcomePage,
navigationOptions: {
gesturesEnabled: true,//是否可以使用手势关闭此屏幕
headerTitle: null//去掉 react-navigation提供的标题
}
},
BottomTab: {
screen: BottomTab,
navigationOptions: {
gesturesEnabled: true,
headerTitle: null
}
}
}, {
mode: 'card', //页面切换模式，左右：card, 上下：modal
headerMode: 'none', //默认导航栏：screen渐变，float:无透明效果，none隐藏
transitionConfig: () => ({ //切换动画
screenInterpolator: CardStackStyleInterpolator.forHorizontal //水平
})
});
export default App
b. 底部路由：
const BottomTab = createBottomTabNavigator({
IndexPage: {
screen: IndexPage,
navigationOptions: {
header: null,
tabBarLabel: '首页',
tabBarIcon: ({ focused, tintColor }) => (
)
}
},
CategoryPage: {
screen: CategoryPageTopTab,
navigationOptions: {
header: null,
tabBarLabel: '分类',
tabBarIcon: ({ focused, tintColor }) => (
)
}
},
CartPage: {
screen: CartPage,
navigationOptions: {
header: null,
tabBarLabel: '购物车',
tabBarIcon: ({ focused, tintColor }) => {
}
}
},
MyPage: {
screen: MyPage,
navigationOptions: {
header: null,
tabBarLabel: '个人中心',
tabBarIcon: ({ focused, tintColor }) => {
}
}
}
}, {
tabBarOptions: {
activeTintColor: theme.primaryColor,
inactiveBackgroundColor: theme.lightGray,
}
});
c. 顶部路由
const CategoryPageTopTab = createMaterialTopTabNavigator({
CategoryPage: {
screen: CategoryPage,
navigationOptions: {
tabBarLabel: '品类'
}
},
BrandPage: {
screen: BrandPage,
navigationOptions: {
tabBarLabel: '品牌'
}
}
}, {
swipeEnabled: true, //是否可以左右滑动
animationEnabled: true, // 切换页面时是否有动画效果
backBehavior: 'none',// 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions: {
labelStyle: {
},
style: {
height: theme.actionBar.height + theme.barContentPad,
marginHorizontal: theme.screenWidth / 6,
paddingTop: theme.barContentPad,
backgroundColor: '#fff'
},
tabStyle: {
width: theme.screenWidth / 3
},
activeBackgroundColor: '#fff',
activeTintColor: theme.primaryColor, //活跃状态下前景色
inactiveBackgroundColor: '#fff',
inactiveTintColor: theme.lightBlack,
showIcon: false,
showLabel: true,
pressOpacity: 0.3,
indicatorStyle: {
height: 2,
width: theme.screenWidth / 9,
backgroundColor: theme.primaryColor,
left: theme.screenWidth / 9
}
},
// tabBarComponent: (props) => (
//
// )
});
d. theme.js配置文件：
import { Dimensions, Platform } from 'react-native';
export default module = {
screenWidth: Dimensions.get('window').width,
screenHeight: Dimensions.get('window').height,
primaryColor: '#ee0000',
lightGray: '#f5f5f5',
darkGray: '#e5e5e5',
lightBlack: '#333333',
actionBar: {
height: Platform.OS === 'android' ? 56 : 44,
backgroundColor: '#fff'
},
barContentPad: (Platform.OS === 'android' ? 0 : 20),
bottomPadding: isIphoneX() ? 18 : 0,
btnActiveOpacity: 0.5
}
export function isIphoneX(){
return false;
}
网友评论