在React Native中,我们npm install后,在项目中会根据package.json下载依赖库,并保存在项目根目录的node_modules文件夹内
image.png
注意,这里的代码是可以改的(相比安卓sdk源码只是编译用,apk在运行时会用手机上内置的sdk,是不是方便多了,可以随意调试)
那么,如何查看某个库(以官方推荐的导航库react-navigation为例)源代码呢?我们打开node_modules目录下的react-navigation目录(node_modules在WebStorm下显示成黄色)
打开src目录,源码就全在这里啦
image.png下面讲一个例子,我们知道react-navigation中关于导航条的设置(标题,左右按钮等)有三种方法:
1.在对应的component中设置名为navigationOptions的static 变量
image.png
2.在
image.png
的第一个参数中
image.png放在每一个screen对象的navigationOptions属性中
3.在
image.png
的第二个参数中
image.png的navigationOptions属性中
那么三种方法的属性配置肯定是有先后优先顺序的,优先级高的会覆盖优先级低的,那么谁的优先级高呢?
我们可以在react-navigation的src目录下搜索navigationOptions
找到createConfigGetter.js中的源码,这里有一段
image.png其中navigatorScreenConfig对应第3种方法配的navigationOptions,
componentScreenConfig对应第1种方法,
routeScreenConfig对应第2种方法。
(为什么?具体原因可以从调用StackNavigation(...)开始看,或者从这里回溯回去,由于这里都是export default出去的,搜索可以搜索"类名+("搜索调用的地方,如搜索"createConfigGetter(" )
并且applyConfig方法中的实现是
image.png看见了吗?第一个参数是后面叠加上去的,也就是说第一个参数优先。
所以最终的结果是2>1>3的优先级。
最后贴一下react-navigation的github和官方文档
github: https://github.com/react-community/react-navigation
官方文档: https://reactnavigation.org/docs/navigators/stack
网友评论
I add this code to index.js, so that i can ignore this warnning.
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
看起来是库的新版本有问题,可以降级,或者如果没有什么实质性的问题就不动,关注这个问题等作者修复吧
https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html