React-native IT喵喵~路由之React Navigation
发布时间:2020-12-15 07:17:32 所属栏目:百科 来源:网络整理
导读:大家自己 去看文档吧!!! 为了业务快把文档看完了。。。 不过给大家翻译了一点。。。 欢迎大家关注一下 基于React-naive开发的“IT喵~”项目。技能GET、互联网资讯、程序员相亲、GitHub监控。。。 Github地址:https://github.com/cbamls/kitty_front 效果
大家自己 去看文档吧!!! 为了业务快把文档看完了。。。 不过给大家翻译了一点。。。欢迎大家关注一下 基于React-naive开发的“IT喵~”项目。技能GET、互联网资讯、程序员相亲、GitHub监控。。。 Github地址:https://github.com/cbamls/kitty_front效果图内置的Navigators起
使用Navigators渲染screennavigators渲染的应用screen实质上是一个个的React组件 StackNavigatorclass MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',}
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Profile',{name: 'Lucy'})}
title="Go to Lucy's profile"
/>
);
}
}
const ModalStack = StackNavigator({
Home: {
screen: MyHomeScreen,},Profile: {
path: 'people/:name',screen: MyProfileScreen,});
API 定义StackNavigator(RouteConfigs,StackNavigatorConfig)
RouteConfigsStackNavigator({
Profile: {
//`ProfileScreen`是一个React component组件
screen: ProfileScreen,// 当`ProfileScreen` 被 StackNavigator加载,他会被默认传递一个 `navigation` 属性.
path: 'people/:name',// 传递action和路由参数
// Optional: 覆盖`ProfileScreen`的 `navigationOptions`
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.name}'s Profile'`,
}),...MyOtherRoutes,});
StackNavigatorConfig
TabNavigatorclass MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon,{tintColor: tintColor}]}
/>
),};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon,};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,height: 26,});
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,Notifications: {
screen: MyNotificationsScreen,{
tabBarOptions: {
activeTintColor: '#e91e63',});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |