react-navigation示例
什么react-navigation (官网:https://reactnavigation.org/docs/intro/)
- 在react-navigation出来之前,页面跳转最多使用的是navigator,然而navigator最大的缺点就是卡顿!卡顿!卡顿!以至于你不得不配合runAfterInteractions使用,即先让页面跳转动画执行完毕,再执行页面中的逻辑,这样效率显然大大降低!
- 前一段时间开始推荐使用react-navigation,并且在0.44发布的时将之前一直存在的Navigator废弃了
- react-navigation功能强大,包括StackNavigator,TabNavigator和DrawerNavigator
一个 StackNavigator + DrawNavigator +TabNavigator 传参Demo
- 使用前请先下载:
npm install --save react-navigation
- router路由页
import {StackNavigator} from "react-navigation";
import MainPage from './mainPage';
import DetailPagDe from './views/details/detailPage'
const routers = StackNavigator({
Main: {
screen: MainPage,
},
Detail: {
screen: DetailPagDe,
},
});
module.exports = routers;
- main容器页(承载了home,order,mine等三个tab页)
import React, {Component} from 'react';
import {
StyleSheet,
Image,
Style
} from 'react-native';
import {TabNavigator} from "react-navigation";
import HomePage from './views/HomePage';
import OderPage from './views/OderPage';
import MinePage from './views/MinePage';
const mainPage = TabNavigator({
Home: {
screen: HomePage,
navigationOptions: {
//默认参数
}
},
Oder: {
screen: OderPage,
navigationOptions: {
}
},
Mine: {
screen: MinePage,
//以下参数也可放置在MinePage.js页面
navigationOptions: {
title: '我的',
tabBarLabel: '我的',
tabBarIcon: ({ tintColor }) => (
<Image
source={
require('./images/cert0.png')
}
style={[styles.icon,{tintColor: tintColor}]}// {tintColor: tintColor} 选中的图片和文字颜色
/>
),
headerTitleStyle: {
alignSelf:'center'
}
}
},
}, {
animationEnabled: true, // 切换页面时不显示动画
tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的
swipeEnabled: true, // 禁止左右滑动
backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转
tabBarOptions: {
activeTintColor: '#0F9C00', // 文字和图片选中颜色
inactiveTintColor: '#999', // 文字和图片默认颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了, 不知道还有没有其它方法隐藏???
style: {
backgroundColor: '#444', // TabBar 背景色
height:50
},
labelStyle: {
fontSize: 12, // 文字大小,
marginTop: 0,
},
},
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
icon:{
width:20,
height:20
}
});
module.exports = mainPage;
- home页
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Button,
TouchableOpacity
} from 'react-native';
import DrawPage from './DrawPage'
export default class HomePage extends Component {
static navigationOptions = {
title: '首页',
tabBarLabel: '首页',
tabBarIcon: ({ tintColor }) => (
<Image
source={
require('../images/cert0.png')
}
style={[styles.icon,{tintColor: tintColor}]}// {tintColor: tintColor} 选中的图片和文字颜色
/>
),
headerTitleStyle: {
alignSelf:'center'
},
};
render() {
return(
<DrawPage/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
icon:{
width:20,
height:20
}
});
*order页
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Button
} from 'react-native';
import { NavigationActions } from 'react-navigation'
export default class OderPage extends Component {
static navigationOptions = {
title: '订单',
tabBarLabel: '订单',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('../images/cert0.png')}
style={[styles.icon,{tintColor: tintColor} ]}
/>
),
};
goToDetail() {
const {dispatch} = this.props.navigation;
const resetAction = NavigationActions.reset({
index: 0,//指定显示数组内的路由
actions: [
NavigationActions.navigate({ routeName: 'Detail',params:{user: 'xiongtm'}}),
//NavigationActions.navigate({ routeName: 'others',params:{user: 'xiongtm'}}),
]
});
dispatch(resetAction);
}
render() {
return (
<View style={styles.container}>
<Button
onPress={() => this.goToDetail()}
title="跳转+传参+清空路由"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
icon:{
width:20,
height:20
}
});
*mine页
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class MinePage extends Component {
render() {
return (
<View style={styles.container}>
<Text>我的</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
icon:{
width:20,
height:20
}
});
- 抽屉页
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Button,
ScrollView
} from 'react-native';
import {DrawerNavigator, DrawerItems} from 'react-navigation';
class MyHomeScreen extends Component {
// static navigationOptions = {
// drawerLabel: 'Home',
// drawerIcon: ({tintColor}) => (
// <Image
// source={require('../images/cert0.png')}
// style={[styles.icon, {tintColor: tintColor}]}
// />
// ),
//
// };
render() {
return (
<View style={styles.container}>
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
<Button
onPress={() => this.props.navigation.navigate('DrawerOpen')}
title="DrawerOpen"
/>
<Button
onPress={() => this.props.navigation.navigate('DrawerClose')}
title="DrawerClose"
/>
</View>
);
}
}
class MyNotificationsScreen extends Component {
// static navigationOptions = {
// drawerLabel: 'Notifications',
// drawerIcon: ({tintColor}) => (
// <Image
// source={require('../images/cert0.png')}
// style={[styles.icon, {tintColor: tintColor}]}
// />
// ),
//
// };
render() {
return (
<View style={styles.container}>
<Button
onPress={() => this.props.navigation.navigate('Home')}
title="Go back home"
/>
</View>
);
}
}
const CustomDrawerContentComponent = (props) => (
<ScrollView>
{/*<DrawerItems {...props} />*/}
<View>
<Text>46645646546</Text>
</View>
</ScrollView>
);
const MyDraw = DrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
},
{
//drawerWidth: 200, // 抽屉宽
drawerPosition: 'left', // 抽屉在左边还是右边
contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
// contentOptions: {
// initialRouteName: MyHomeScreen, // 默认页面组件
// activeTintColor: 'white', // 选中文字颜色
// activeBackgroundColor: '#ff8500', // 选中背景颜色
// inactiveTintColor: '#666', // 未选中文字颜色
// inactiveBackgroundColor: '#fff', // 未选中背景颜色
// style: { // 样式
//
// }
// }
});
module.exports = MyDraw;
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
container:{justifyContent: 'center', alignItems: 'center', flex: 1}
});