启动
认识一下index.js文件,代码如下:
复制代码
import { AppRegistry } from 'react-native'; #从‘react-native’库中引入‘AppRegistry’组件
import App from './App'; #引入‘App.js’文件,并起个别名叫‘App’(这个名字可以随便起)
AppRegistry.registerComponent('HelloWorld', () => App); #注册js入口
复制代码
AppRegistry负责注册运行RN应用程序的js入口。'HelloWorld'这个是项目名称,不要随便修改哦!可还记得上面文章中:
复制代码
react-native init HelloWorld
复制代码
这句代码,你创建工程时候的名字。如果这个对应不上你就会出现以下情况:
复制代码
相信不少小伙伴都遇见过这个问题吧!
复制代码
体验跳转
API简介 - StackNavigator
背景介绍:从0.44版本开始,Navigator被从react native的核心组件库中剥离到了一个名为
react-native-deprecated-custom-components的单独模块中。社区今后主推的方案是一个单独的导航库
react-navigation,它的使用十分简单。所以我们使用StackNavigator来进行跳转
复制代码
先来一波代码
Nav.js源码:
import {StackNavigator} from 'react-navigation'
import Hello from "./Hello";
import World from "./World"
export default NavData = StackNavigator({Hello: {screen: Hello}, World: {screen: World}})
复制代码
创建一个StackNavigator(有android经验的小伙伴,仔细看看有点Androidmanifest.xml的味道),注册了别称‘Hello’的
Hello.js文件和称‘World’的World.js文件
复制代码
index.js源码:
import {AppRegistry} from 'react-native';
import App from './src/solide/testNavagation/Nav';
AppRegistry.registerComponent('HelloWorld', () => App); #这里要注意是StackNavigator去注册启动
复制代码
应用默认启动第一个元素Hello
复制代码
Hello.js源码:
import React, {Component} from 'react';
import {View, Text} from 'react-native'
import {} from 'react-navigation'
export default class Hello extends Component {
//设置导航栏标题
static navigationOptions = {
title: 'Hello'
};
render() {
const {navigate} = this.props.navigation;
return <View>
//设置点击事件
<Text onPress={() => navigate('World')}>Hello Hello</Text>
</View>
}
}
复制代码
World.js源码就不放了,只有一个view展示。
项目地址
https://github.com/yzj0487/StackNavigator
复制代码
详细分析一波
如果你是下载的完成项目或者copy的代码,那么相信你已经体验过跳转了。代码只简单的几行,如果你是自己写的,那么
我相信你会遇见不少问题,或者你会问为什么要这样写?
来来小问题走一波:
复制代码
有木有很兴奋,又是熟悉的红色。标题很清晰,navigate对象找不到,引起原因:
复制代码
const {navigate} = this.props.navigation;
复制代码
就是这行代码引起的,引起的原因大致两种:
1、你没有写这行代码
2、这行代码的作用域没有覆盖到(例如你把click方法定义在外面,那么这行代码也要写在click方法里面,如果你写在
render里面就会报错)
小知识点:这里this.props不知道小伙伴是怎么理解的?今后他会和我们经常见面,这里我对它也不是特别了解,反正它
的作用很多,我们暂且把他理解为——组件的属性
好学的小伙伴,肯定还会有很多问题,我们再简单看个问题,为咩‘static navigationOptions’这么一个静态变量就能设置属性?
回答这个问题我们必须去看看StackNavigator的源码了
复制代码
StackNavigator.js源码:
export default (routeConfigMap, stackConfig = {}) => {
const {
initialRouteKey,
initialRouteName,
initialRouteParams,
paths,
headerMode,
headerTransitionPreset,
mode,
cardStyle,
transitionConfig,
onTransitionStart,
onTransitionEnd,
navigationOptions,
} = stackConfig; //配置信息
const stackRouterConfig = {
initialRouteKey,
initialRouteName,
initialRouteParams,
paths,
navigationOptions,
};
const router = StackRouter(routeConfigMap, stackRouterConfig);
// Create a navigator with CardStackTransitioner as the view
const navigator = createNavigator(router, routeConfigMap, stackConfig)(
props => (
<CardStackTransitioner
{...props}
headerMode={headerMode}
headerTransitionPreset={headerTransitionPreset}
mode={mode}
cardStyle={cardStyle}
transitionConfig={transitionConfig}
onTransitionStart={onTransitionStart}
onTransitionEnd={(lastTransition, transition) => {
const { state, dispatch } = props.navigation;
dispatch(NavigationActions.completeTransition({ key: state.key }));
onTransitionEnd && onTransitionEnd(lastTransition, transition);
}}
/>
)
);
return createNavigationContainer(navigator);
};
复制代码
查看一下源码是不是豁然开朗了?如果没有,那么我简单说两句,config中直接引用常量属性‘navigationOptions’,
那么你在组件中‘static navigationOptions’就是override这个属性了。
附上官方解释:the options can be a function that takes the following arguments, and returns an object of
navigation options that will be override the route-defined and navigator-defined navigationOptions
文档地址:https://reactnavigation.org/docs/stack-navigator.html
复制代码