美文网首页React-Native 知识
React Native查看源代码的方法(以官方导航react-

React Native查看源代码的方法(以官方导航react-

作者: CharlesYale | 来源:发表于2017-08-23 15:17 被阅读30次

    在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

    image.png

    找到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

    相关文章

      网友评论

      • sunney0:你好,React-Navigation有警告啊,Warning: isMounted(...) is deprecated in plain JavaScript React classes. isMounted函数被弃用,您没有遇到么,怎么解决这个警告?
        sunney0:@CharlesYale 库里没有看到isMounted()函数,看到了this.isMounted=true 这样的写法。在github提问 ,作者回复的你给的这个链接,用下面方法忽略了这个warning,暂时这么解决的。
        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']);
        CharlesYale:https://github.com/react-navigation/react-navigation/issues/3956
        看起来是库的新版本有问题,可以降级,或者如果没有什么实质性的问题就不动,关注这个问题等作者修复吧
        CharlesYale:看下React-Navigation的代码里是否有用到isMounted()函数,就在node_modules里面的React-Navigation里搜索,正确的做法应该是这样的:
        https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

      本文标题:React Native查看源代码的方法(以官方导航react-

      本文链接:https://www.haomeiwen.com/subject/zhkddxtx.html