zoukankan      html  css  js  c++  java
  • React Native学习笔记

    nvm、npm和nodejs的关系:https://www.cnblogs.com/qqpw/p/6597295.html

    JS的模块加载方案及ES6的import和export用法:https://www.cnblogs.com/dupd/p/5951311.html

    export和module.exports的区别:

    https://www.jianshu.com/p/e452203d56c4

    介绍混合应用开发的好文:

    1、《2017混合应用开发现状》:https://refined-x.com/2017/06/23/2017%E6%B7%B7%E5%90%88%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E7%8E%B0%E7%8A%B6/

    关于使用ES6语法

    React、ReactNative中的es5和es6中的写法对照:

    https://www.cnblogs.com/kuailingmin/p/5476884.html

    一个使用this时的知识点:

    如果你在一个方法体定义中定义另一个方法体,嵌套在内测的方法体想使用外侧方法体的this时,需要在外侧方法体重先将this定义成别的名字的变量。

    例子:

    methodA=()=>{

         bla bla bla...

         let that = this;

         someClass.methodB(){

             that.setState({

        bla bla bla...

       });

         }

    }

    关于ES6写法的坑NO.1:

    问题:我在使用ES6语法编写一个自定义class的内置自定义方法时,大部分这么写是OK的:

    methodName(){

      bla bla bla...

    }

    直到我有一次在方法体代码中使用了this.setState时,编译开始死活报错,提示this.setState is undefined。

    反复检查程序逻辑没问题,国内狗度搜索结果让人极度失望。想在网上查React Native的问题,必须得上神器。

    解决办法:使用谷歌搜索,在stackoverflow上一位国外大神推荐在使用ES6时这样定义方法:

    methodName=()=>{

      this.setState{

               bla bla bla...

          }

    }

    试了真的就tm可以了。。。

      而且,在我后续调试程序的过程中发现,凡是你打算在方法体中使用this关键字的,最好都用上面的定义方式,否则经常

    会出现this或this.XXX取不到值的怪现象。真的是防不胜防啊!保险起见,所有方法都这么定义才最好。只有构造方法constructor()

    不可以这么定义,会报错:Class may not have a non-static field named 'constructor'。可见,这种定义方式的使用范围

    是当你定义一个non static field时才适用。

      当你定义一个static field时可以这样:

    例如下面的例子是定义一个工具类,注意static的属性只能定义在class定义体之外,也就是大括号之外:

    export default class Util extends Component{
    // 屏幕尺寸
    static windowSize = {
    Dimensions.get("window").width,
    height: Dimensions.get("window").height
    };

    // 基于fetch的get方法,只负责下载数据,下载后的处理操作在回调方法中实现
    static getRequest(url,successCallback,failCallback){
    fetch(url)
    .then((response) => {return response.json();})
    .then((responseData) => successCallback(responseData))
    .catch((error) => failCallback(error));
    };

    // loading效果
    // loading: <ActivityIndicator style={{marginTop:200}}/>
    };
    // loading效果
    Util.loading = <ActivityIndicator style={{marginTop:200}}/>;

    大神回答帖地址:https://stackoverflow.com/questions/39210971/this-setstate-is-undefined

    ReactNative中的Navigator组件已经过时,该如何继续使用?

    转自:https://blog.csdn.net/gl_mine_csdn/article/details/73740868

    当要引入Navigator的使用通常的做法是:

    import {Navigator} from "react-native"

    当我们进行执行react native 程序的时候 告知我们 该组件已经不存在 :

    [plain] view plain copy
     
    1. 'Navigator is deprecated and has been removed from this package. It can now be installed ' +  
    2.       'and imported from `react-native-deprecated-custom-components` instead of `react-native`. ' +  
    3.       'Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html'  
    4.      


    此时我们将要做的便是通过引用:

    react-native-deprecated-custom-components 来导入 Navigator 组件

    步骤如下:

    1、打开程序的根目录(也就是和 Package.json 同级的目录)

    2、使用cmd 命令工具 或者 Git Bash Here (前提是安装过GIT工具)  

          输入命令:    npm  install   react-native-deprecated-custom-components  --save 

    (下载并保存,此时package.json 文件 中 便会增加一条对该库的引用代表成功)

    3、在使用Navigator的地方引用便可使用。

    引用方式:import {Navigator} from "react-native-deprecated-custom-components" 

    注意:在引用时 一定在导入 Navigator的时候加上 {}  要不然会报错。

    同时:当我在使用  npm  install   react-native-deprecated-custom-components  --save  时报错

    解决方法:

    使用命令: npm  i   react-native-deprecated-custom-components  --save 

    如果此方法还不能解决。

    解决方法:

    使用yarn命令(前提是自己有yarn的配置环境)

    使用命令:yarn add  react-native-deprecated-custom-components  --save 

    最终解决Navigator的下载。

    亲测:在mac上使用npm命令安装react-native-deprecated-custom-components包以后不行,使用yarn命令以后可以。

    react native组件的生命周期

    转自:https://www.race604.com/react-native-component-lifecycle/

     iOS真机测试设置步骤:

    1、使用appleID创建开发者账号,生成描述文件

    xcode偏好设置 > account > appleIDs点"+"按钮 > 输入id密码以后点manage certificats按钮 > +一个iOS开发者 > done

    2、将待测工程跟你的开发者账号挂钩:

    点击xcode中的工程名DoubanProject > 选中右侧general面板中的targets栏目DoubanProject,修改Bundle Identifier使其唯一,然后往下看,在team下拉框中选择自己的开发者账号,查看provisioning profile和signing certificate有没有值,没有就点retry,如果不行就查看bundle identifier是不是唯一的,直到这两个值正常 > 回到targets栏目选中DoubanProjectTests,查看Host Application和team设置对不对,不对就改正。

    3、设置待测工程生成的jsbundle文件在你的iPhone里运行

    (1)将你的iPhone连接mac电脑,并信任这台电脑。

    (2)打开DoubanProject工程、DoubanProject文件夹下的AppDelegate.m文件,使用“//“注释掉原来的jsCodeLocation赋值语句,新建

    jsCodeLocation = [NSURL URLWithString:@"http://192.168.2.105:8081/index.bundle?platform=ios&dev=true"];

    其中192.168.2.105是局域网中mac电脑的ip,需要注意的是index.bundle这个写法,因为旧版本的react native模板是由index.ios.js启动,所以如果你使用的是旧版本的react native,此处要写index.ios.bundle。

    (3)在xcode运行设备中选择你的iPhone(就是你在mac电脑里选不同手机型号来模拟画面的那个地方),点播放键运行。

    (4)第一次运行时,在你的iPhone里自动安装完DoubanProject APP以后,运行会报错。先退出app,再进入手机的设置>通用>设备管理,信任自己的appleID,再重新使用xcode run一次即可。

  • 相关阅读:
    MongoDB 分片管理(一)检查集群状态
    MongoDB 副本集
    MongoDB 集群设置集合分片生效及查看集合分片情况
    mongodb 导入json文件遇到的坑
    GreenPlum/postgres copy命令导出/导入数据
    Mongo mongoexport/mongoimport介绍
    mongoDB之监控工具mongostat
    Oracle ORA-00600[2662] 解决
    ORA-00600[2662]问题 汇总
    MySQL的基本使用
  • 原文地址:https://www.cnblogs.com/mabaishui/p/8673245.html
Copyright © 2011-2022 走看看