精华内容
下载资源
问答
  • 当第三方插件源码修改后,必须重启服务. 猜测,第三方插件在服务启动时会生成缓存. 如果不重启无论如何修改代码,都不会产生影响——这个是经过测试的 注意是重启服务,不是简单的cmd+R 刷新,也不是关闭应用重新打开,...
    当第三方插件源码修改后,必须重启服务.
    猜测,第三方插件在服务启动时会生成缓存.
    如果不重启无论如何修改代码,都不会产生影响——这个是经过测试的
    注意是重启服务,不是简单的cmd+R 刷新,也不是关闭应用重新打开,也不是点击XCode的按钮执行重新安装.
    必须npm start 或者react-native run-ios  或者关闭终端后在XCode中点击按钮重新安装 
    展开全文
  • 1.5 小试牛刀——更改React Native项目源码 应用虽然已经运行起来了,但是到现在还没有看到或修改任何代码,读者是不是觉得意犹未尽呢?下面就来看看React Native项目的源码吧。 打开index.ios.js文件,可以看到与...

    1.5 小试牛刀——更改React Native项目源码
      应用虽然已经运行起来了,但是到现在还没有看到或修改任何代码,读者是不是觉得意犹未尽呢?下面就来看看React Native项目的源码吧。
      打开index.ios.js文件,可以看到与显示在设备上内容直接相关的代码:

    01 export default class ch02 extends Component { // 每个页面可以理解成一个组件
    02 render() { // 渲染页面的函数
    03 return (
    04 // 页面根View
    05
    06 Welcome to React Native!
    07
    08
    09 To get started, edit index.ios.js
    10
    11
    12 Press Cmd+R to reload,{'n'}
    13 Cmd+D or shake for dev menu
    14
    15
    16 );
    17 }
    16 }

      为了证实我们的想法,将代码中的文本内容从“Welcome to React Native!”修改为“我的第一个React Native应用!”,然后在iOS模拟器中使用快捷键command + R重新加载应用,果然界面更新了!如图1.25所示。
    image

    图1.25 修改文本内容后的效果
    ?提示:如果已经打开了Enable Live Reload调试选项,就不需要手动重新加载应用了,修改完代码直接可以看到效果。
      接着,再来看看显示样式的代码:

    01 const styles = StyleSheet.create({
    02 container: { // 页面根View的样式
    03 flex: 1,
    04 justifyContent: 'center',
    05 alignItems: 'center',
    06 backgroundColor: '#F5FCFF'
    07 },
    08 welcome: { // “欢迎”文本的样式
    09 fontSize: 20,
    10 textAlign: 'center',
    12 margin: 10
    12 },
    13 instructions: { // “说明”文本的样式
    14 textAlign: 'center',
    15 color: '#333333',
    16 marginBottom: 5
    17 }
    18 });

      在welcome样式中添加color: 'red'属性:

    01 welcome: {
    02 fontSize: 20,
    03 textAlign: 'center',
    04 margin: 10,
    05 color: 'red' // 也可以用RGB值'#FF0000'来表示红色
    06 },
    ?注意:第一次编写React Native代码时很容易发生遗漏逗号“,”等拼写错误。
      重新加载应用后,效果如图1.26所示。
      以上是iOS App的运行效果,同样也可以对index.android.js文件做类似的修改,重新加载Android App效果如图1.27所示。

    ![image](https://yqfile.alicdn.com/fc1f4dfde2596fe9f64cd06b9034d24f387c5ce4.png)
    
    图1.26  修改文字颜色后效果    图1.27  Android App运行的效果

    ?提示:实际开发中,index.io.js和index.android.js往往复用相同的逻辑,即将相同的代码提取到公共文件中,这样就可以大大发挥React Native的跨平台优势。

    展开全文
  • 如果按官方指导走来修改安卓源码然后从源码编译,可以要人老命,各种环境配置,麻烦程度堪称杀人利器。 本文将另辟稀径,解决这一麻烦。 一、新建一个java工程,最好是maven项目,然后将项目下面的node_modules/...

    如果按官方指导走来修改安卓源码然后从源码编译,可以要人老命,各种环境配置,麻烦程度堪称杀人利器。

    本文将另辟稀径,解决这一麻烦。

     

    一、新建一个java工程,最好是maven项目,然后将自己react native项目下面的node_modules/react-native/ReactAndroid/src/main/java里面的java源码复制到新的工程;

    二、从自己react native项目下面的node_modules\react-native\android\com\facebook\react\react-native\0.60.5\react-native-0.60.5.pom里,将maven依赖复制到新的工程里面的pom.xml中。然后对依赖要作如下的调整:

    1.有些依赖是位于google仓库的,是访问不了的,可以下载下来通过本地的方式添加到构建目录,如android相关的一些依赖;

    2.有些依赖是aar格式,不再是传统的jar了,要特别注意;

    三、按需要修改源码;

    四、将修改过的类的编译过的字节码通过7-zip工具拖入到自己react native项目下面的node_modules/react-native/android/com/facebook/react/react-native/0.60.5/react-native-0.60.5.aar文件里面的classes.jar中的对应位置即可;

     

     

     

    展开全文
  • react-native 对七牛的扩展支持问题: react-native-qiniu 已经废弃好久了,没有人写,网上找到的也只能解决一点点问题,然后图片上传也存在着一系列的问题.参考着网上一些代码,我修改了其文件上传的部分.虽然可以在...

    react-native 对七牛的扩展支持

    问题:
    react-native-qiniu 已经废弃好久了,没有人写,网上找到的也只能解决一点点问题,然后图片上传也存在着一系列的问题.参考着网上一些代码,我修改了其文件上传的部分.虽然可以在服务端进行上传,但总觉得base64先上传到服务器,再通过服务器上传到网站的话,在图片很多的情况下会影响一些性能,而且也不是很方便

    修改后:

    1. 可以上传文件,自定义参数上传,在上传成功后可以正确获取到参数信息, token会正确生成
    2. 可以指定上传策略 如:returnbody等
    3. 错误时可以收到错误信息
    4. 增加进度显示,可以获取上传文件的进度
    5. 添加了回调函数,可以监听xmlhttprequest的readystate(没什么用)
      注:
    6. 原七牛网址:https://github.com/qiniudemo/react-native-sdk

    使用步骤:

    1. 下载原react-native-qiniu npm i react-native-qiniu --save
    2. 替换目录里的两个文件rpc.jsauth.js
    3. 使用修改后API进行上传

    如果是和我一样不知道如何使用七牛上传的小白可以参看以下官方文档:

    1. 上传策略部分: https://developer.qiniu.com/kodo/manual/1206/put-policy
    2. 直传文件部分:https://developer.qiniu.com/kodo/api/1312/upload
      (react native实际上是使用formData 模拟表单来进行文件的上传)

    如有其他问题欢迎留言,互相讨论进步


    修改的代码部分

    rpc.js
    主要修改部分:

    1. uploadFile函数重构
    2. 添加回调
    3. 处理promise
    import conf from './conf.js';
    import Auth from './auth';
    
    //发送管理和fop命令,总之就是不上传文件
    function post(uri, adminToken, content) {
      var headers = {
        'Content-Type': 'application/x-www-form-urlencoded',
      };
      let payload = {
        headers: headers,
        method: 'POST',
        dataType: 'json',
        timeout: conf.RPC_TIMEOUT,
      };
      if (typeof content === 'undefined') {
        payload.headers['Content-Length'] = 0;
      } else {
        //carry data
        payload.body = content;
      }
    
      if (adminToken) {
        headers['Authorization'] = adminToken;
      }
    
      return fetch(uri, payload);
    }
    
    
    /**
     * 直传文件
     * formInput对象如何配置请参考七牛官方文档“直传文件”一节
     */
    
    function uploadFile(dataParams, policy, callbackUpDate = function () { }, callBackMethod = function () { }) {
      let params = getParams(dataParams, policy);
      let uri = params.uri;
      let data = params.data;
      let oloaded = null;
      let responseObj = {};
      return new Promise((resolve, reject) => {
        if (typeof uri != 'string' || uri == '' || typeof data.key == 'undefined') {
          reject && reject(null);
          return;
        }
        if (uri[0] == '/') {
          uri = "file://" + uri;
        }
        //创建xhr并open
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          responseObj.readyState = xhr.readyState; //状态0-4
          responseObj.data = xhr.response;//返回值
          responseObj.textData = xhr.responseText; //返回值Text
          responseObj.status = xhr.status; //状态码
          // responseObj.message = ""
          switch (xhr.readyState) {
            case 0:
              callBackMethod(responseObj)
              break;
            case 1:
              callBackMethod(responseObj)
              break;
            case 2:
              callBackMethod(responseObj)
              break;
            case 3:
              callBackMethod(responseObj)
              break;
            case 4:
              if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                if (xhr.status == 200) {
                  callBackMethod(responseObj)
                }
              } else {
                callBackMethod(responseObj)
              }
              break;
          }
        };
        xhr.open('POST', conf.UP_HOST);
        xhr.onload = () => {
          if (xhr.status !== 200) {
            reject && reject(responseObj);
            return;
          }
          resolve && resolve(JSON.parse(responseObj.data));
        };
        xhr.onerror = (evt) => {
          reject && reject(evt);
          return;
        }; //请求失败
        xhr.upload.onloadstart = () => {//上传开始执行方法
          oloaded = 0;//设置上传开始时,以上传的文件大小为0
          console("上传开始")
        };
        xhr.upload.onprogress = (evt) => {
          oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算
          callbackUpDate(Math.round(oloaded / evt.total * 100), oloaded, evt.total)
        };
        xhr.upload.onloadend = (evt) => {
          console("上传结束")
        };
        let formdata = creatFormData(params);
        xhr.send(formdata);
      });
    }
    
    //构造上传参数
    function getParams(data, policy) {
      let putPolicy = new Auth.Policy(
        policy
      );
      let uptoken = putPolicy.token();
      data.token = uptoken;
      let params = {};
      params.uri = data.uri;
      delete data.uri;
      params.data = data;
      return params;
    }
    
    /**
     * 创建一个表单对象,用于上传参数
     * @param {*} params 
     */
    function creatFormData(params) {
      let formdata = new FormData();
      let uri = params.uri;
      let formInput = creatFormInput(uri);
      let data = params.data;
      console.log(data)
      for (let key of Object.keys(data)) {
        let value = data[key];
        if (key.charAt(0) === "_") {
          formdata.append("x:" + key.substring(1, key.length), value);
        } else {
          formdata.append(key, value);
        }
      }
      formdata.append("file", { uri: uri, type: formInput.type, name: formInput.name });
      console.log(formdata)
      return formdata;
    }
    /**
     * 构造表单对象中file对象
     * @param {*} params 
     */
    function creatFormInput(uri) {
      let formInput = {};
      if (typeof formInput.type == 'undefined')
        formInput.type = 'application/octet-stream';
      if (typeof formInput.name == 'undefined') {
        var filePath = uri.split("/");
        if (filePath.length > 0)
          formInput.name = filePath[filePath.length - 1];
        else
          formInput.name = "";
      }
      return formInput;
    }
    
    export default { uploadFile, post }
    

    auth.js

    主要修改部分:

    1. PutPolicy类重构为Policy类
    2. 修改构造JSON字符串算法 _parse2Str()
    import base64 from 'base-64';
    import CryptoJS from "crypto-js";
    import conf from "./conf.js";
    import parse from 'url-parse';
    
    function urlsafeBase64Encode(jsonFlags) {
      var encoded = base64.encode(jsonFlags);
      return base64ToUrlSafe(encoded);
    };
    
    function base64ToUrlSafe(v) {
      return v.replace(/\//g, '_').replace(/\+/g, '-');
    };
    
    function hmacSha1(encodedFlags, secretKey) {
      var encoded = CryptoJS.HmacSHA1(encodedFlags, secretKey).toString(CryptoJS.enc.Base64);
      return encoded;
    };
    
    function generateAccessToken(url, body) {
      var u = parse(url, true);
    
      var path = u.pathname;
      var access = path + '\n';
    
      if (body) {
        access += body;
      }
    
      var digest = hmacSha1(access, conf.SECRET_KEY);
      var safeDigest = base64ToUrlSafe(digest);
      let token = 'QBox ' + conf.ACCESS_KEY + ':' + safeDigest;
      //console.log(token);
      return token;
    };
    
    
    
    class Policy {
      constructor(policy) {
        if (typeof (policy) == "undefined") {
        } else {
          this.policy = policy;
          if (typeof (policy.deadline) == "undefined" || policy.deadline == null) {
            this.policy.deadline = 3600 + Math.floor(Date.now() / 1000);
          }
        }
      }
    
      _parse2Str(putPolicy) {
        let str = "{";
        let keys = Object.keys(putPolicy);
        keys.forEach((key, i) => {
          let value = putPolicy[key];
          if (typeof (value) == "object") {
            str = `${str}"${key}":`
            str = `${str}"{`
            Object.keys(value).forEach((key2) => {
              let value2 = value[key2];
              let re = /(\$\(.*?\))/g;
              if(re.test(value2)){
                str = `${str}\\\"${key2}\\\":${value2},`
              }else{
                str = `${str}\\\"${key2}\\\":"${value2}",`
              }
              
            })
            console.log(keys.length + "::" + i)
            if (i >= keys.length) {
              str = `${str.substring(0, str.length - 1)}}"`
            }else{
              str = `${str.substring(0, str.length - 1)}}",`
            }
          }
          else if (typeof (value) == "number") {
            str = `${str}"${key}":${value},`
          }
          else if (typeof (value) == "string") {
            str = `${str}"${key}":"${value}",`
          }
          else {
            str = `${str}"${key}":"${value}",`
          }
        })
        str = `${str.substring(0, str.length - 1)}}`;
        return str;
      }
    
    
      // _creatStr = (policy) => {
      //   policy['deadline'] = this.expires + Math.floor(Date.now() / 1000);
      //   let policyStr = JSON.stringify(policy);
        // let re = /(\"\$\(.*?\)\")/g;
      //   let newStr = policyStr.replace(re, (value) => {
      //     return value.substring(1, value.length - 1);
      //   })
      //   return newStr;
      // }
    
      token = () => {
        policStr = this._parse2Str(this.policy);
        console.log("policStr", policStr);
        var encodedPutPolicy = this._urlsafeBase64Encode(policStr);
        console.log("encodedPutPolicy", encodedPutPolicy);
        var sign = this._hmacSha1(encodedPutPolicy, conf.SECRET_KEY);
        var encodedSign = this._base64ToUrlSafe(sign);
        console.log("encodedSign", encodedSign);
        var uploadToken = conf.ACCESS_KEY + ':' + encodedSign + ':' + encodedPutPolicy;
        console.log("uploadToken", uploadToken);
        return uploadToken;
      }
    
      _urlsafeBase64Encode = (jsonFlags) => {
        var encoded = base64.encode(jsonFlags);
        return base64ToUrlSafe(encoded);
      };
    
      _base64ToUrlSafe = (v) => {
        return v.replace(/\//g, '_').replace(/\+/g, '-');
      };
    
      _hmacSha1 = (encodedFlags, secretKey) => {
        var encoded = CryptoJS.HmacSHA1(encodedFlags, secretKey).toString(CryptoJS.enc.Base64);
        return encoded;
      };
    
    }
    
    class GetPolicy {
      constructor(expires) {
        this.expires = expires || 3600;
      }
    
      makeRequest(baseUrl) {
        var deadline = this.expires + Math.floor(Date.now() / 1000);
    
        if (baseUrl.indexOf('?') >= 0) {
          baseUrl += '&e=';
        } else {
          baseUrl += '?e=';
        }
        baseUrl += deadline;
    
        var signature = hmacSha1(baseUrl, conf.SECRET_KEY);
        var encodedSign = base64ToUrlSafe(signature);
        var downloadToken = conf.ACCESS_KEY + ':' + encodedSign;
    
        return baseUrl + '&token=' + downloadToken;
      }
    }
    
    export default { urlsafeBase64Encode, generateAccessToken, Policy, GetPolicy }
    
    

    使用方法部分

    1. 自定义参数使用 _ 开头
    2. 值全部为字符串形式,如"${fname}"
    import Qiniu, { Auth, ImgOps, Conf, Rs, Rpc } from 'react-native-qiniu';//添加七牛引用
    Conf.ACCESS_KEY = "xxx";
    Conf.SECRET_KEY = "xxx";
    Conf.UP_HOST = "http://up-z2.qiniu.com"//设置公钥 密钥 和你服务器所在的HOST 这里可以通过服务器获取
    
    ...
    //上传方法
     upload = () => {
             //上传参数
            let params = {
                uri: this.state.imageUrl,//图片路径  可以通过第三方工具 如:ImageCropPicker等获取本地图片路径
                key: "tesst",//要上传的key
                _aa: "aa", //自定义参数,
                _bb: "bb",
            }
            //构建上传策略
            let policy = {
                scope: "niangao-sos:tesst",//记得这里如果格式为<bucket>:<key>形式的话,key要与params里的key保持一致,详见七牛上传策略
                returnBody://returnBody 详见上传策略
                    {
                        name: "$(fname)",//获取文件名
                        size: "$(fsize)",//获取文件大小
                        w: "$(imageInfo.width)",//...
                        h: "$(imageInfo.height)",//...
                        hash: "$(etag)",//...
                        _bb: "$(x:bb)"//获取自定义参数
                    },
            }
            //进行文件上传 
            Rpc.uploadFile(params, policy).then((data) => {
                console.log(data);//打印上传成功后参数
    		/*
    			格式如下
    			{
    			    "name": "IMG_20171124_193927_HDR-compressed.jpg",
    			    "size": 29941,
    			    "w": 260,
    			    "h": 195,
    			    "hash": "FndeZ_b_ZvlsE-3aS5U6yTTR6BZn",
    			    "_bb": "bb"
    			}
    		 */
            }).catch((err) => {
                console.log(err)
           	 /*
    			格式如下
    	         {
    			    "readyState": 4,
    			    "data": "{\"error\":\"key doesn't match with scope\"}",
    			    "textData": "{\"error\":\"key doesn't match with scope\"}",
    			    "status": 403
    			 }
    		 */
            });
        }
    
    
    
    
    展开全文
  • StackNavigator,相信大家都用过不多说,我是小米测试机,用的时候发现在有返回图标的时候,标题设置了居中,依然会向右便宜,解决方法如下图: 注释Header.js这段代码,这里left , right 始终应该为0,不管有...
  • react-native没有提供...在源码基础上做了一些修改。  react-native-modal-dropdown版本为0.6.0 级联出现异常现象的原因为,defaultValue和buttonText的配合没有加入级联的逻辑,导致无法级联显示不正常 新增but
  • 1、前言 上次的远程加载简单描述了app reload(开发时运行也是一个逻辑)和MetroServer...它能让你在修改代码后马上在app上展现结果而且不会丢失状态。 2、HMR通讯方式 先看其创建的位置,也是在runServer中 ...
  • react-native-tag-select修改源码的代码,标签选中取消状态,用过该标签的大概知道是什么用法,会用文档介绍一个例子
  • 有的时候我们需要通过修改源码来完成某些业务需求,并上传maven仓库,以便项目的引用,这样就需要成功编译源码。 首先克隆react-native项目到本地,下载地址https://github.com/facebook/react-native 我使用的...
  • react-native 修改源码后,如何让其他同事直接能用,每次都发过去修改的node源文件肯定是不方便的,这里分享个脚本 其实我们需要达成的目的是修改NodaModule l的源码其他人也在,但是NodaModule 文件肯定是忽略的...
  • 在初始化过后可能会出现此问题,解决方案参考一位 GitHub 的 Issues需要修改ScrollableTabBar源码: 将this.updateView({value: this.props.scrollValue._value, }); 替换为: this.updateView({value: this....
  • 目录 1.navigation导航对象相关参数 ...1.2.3源码 1.3params 1.4navigation的state属性 2.动态修改标题-title或者左右显示组件-headerRight 2.1动态修改标题 2.2动态修改左右显示组件-headerRi...
  • React源码分析-渲染篇

    2018-04-14 16:07:30
    ReactJS和React-Native的区别 React是由Facebook推出的一个JavaScript框架,主要用于前端开发。 React采用组件化的方式简化web开发 1.DOM:每个HTML页面可以看作为一个DOM 2.原生的web开发的方式。HTML一个...
  • 去年拿到书后很快就看完了,然后书就一直放着。...主要涉及两部分:nativeReact Native通信,封装native UI组件 源码nativeReact Native通信:https://github.com/xuechinahb/react-native-exampl
  • 1.react-native-http-cache:https://github.com/reactnativecn/react-native-http-cache 2.针对android的问题进行修改 按照文档安装之后,android会报方法getMainDiskStorageCache()找不到问题 解决办法: 改源码,...
  • React Native 性能优化指南 卤代烃 公号@卤蛋实验室,关注就能变强...本文谈到的 React Native 性能优化,还没到修改 React Native 源码那种地步,所以通用性很强,对大部分 RN 开发者来说都用得着。 本文的内容..
  • React Native Android Gradle 编译流程浅析

    万次阅读 热门讨论 2016-11-11 18:54:58
    了解 React Native 的编译流程是进行 React Native 裁剪阉割的首要任务,理解编译流程才能去看如何依赖、如何裁剪,这和 Android 源码一样,你想修改的前提是熟悉整个 Android 系统源码 build 目录下的 各种 shell、...
  • React Native WebView 实现滑动监听

    千次阅读 2018-02-28 18:10:09
    React Native 的 WebView控件默认是没有滚动监听的,实战开发中有可能会遇到监听webview滚动距离的需求,我们可以通过修改源码来实现。 (1)iOS端实现方式 (2)Android端实现方式...
  • 欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。 本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看: React Native未来导航者:react-...所以需要我们修改源码,...
  • 在使用react-native-image-crop-picker(版本0.20.0)组件选择图片的时候,我希望将选取的图片保存到应用内部。但是在ios端,选取的图片被保存在临时目录中,大约3天左右会被自动删除。在android端,选取的图片没有往...
  • react native navigation 隐藏 bottomTab 前言 在做 react-native app 时, 用到了 react navigation 的 bottom tab ...试了很多中方法,最后比较简单的方式是修改nodeModels里面的源码。 本文 react-native 版本...
  • react-native运行之缓存问题

    千次阅读 2018-09-11 15:57:36
    问题描述:今天在做一个项目详情的时候,需要对react-native的组件源码进行修改。但是该node-modules里面的文件会有一个致命的问题:每次重装依赖(使用yarn install 或者 npm install)之后,node-modules里面的...

空空如也

空空如也

1 2 3 4
收藏数 63
精华内容 25
关键字:

nativereact源码修改