-
material-kit-react-native:Material Kit React Native-源码
2021-02-03 08:35:17Material Kit React Native是在 , 和之上的完全编码的应用程序模板,可让您创建功能强大且美观的电子商务移动应用程序。 我们已经重新设计了Galio中的所有常用组件,使其看起来像Google的材料设计,简约且易于使用... -
ReactNative修改第三方插件源码
2017-03-13 10:21:21当第三方插件源码修改后,必须重启服务. 猜测,第三方插件在服务启动时会生成缓存. 如果不重启无论如何修改代码,都不会产生影响——这个是经过测试的 注意是重启服务,不是简单的cmd+R 刷新,也不是关闭应用重新打开,...当第三方插件源码修改后,必须重启服务.猜测,第三方插件在服务启动时会生成缓存.如果不重启无论如何修改代码,都不会产生影响——这个是经过测试的注意是重启服务,不是简单的cmd+R 刷新,也不是关闭应用重新打开,也不是点击XCode的按钮执行重新安装.必须npm start 或者react-native run-ios 或者关闭终端后在XCode中点击按钮重新安装 -
《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码
2017-08-02 16:02:001.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所示。
图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所示。 图1.26 修改文字颜色后效果 图1.27 Android App运行的效果
?提示:实际开发中,index.io.js和index.android.js往往复用相同的逻辑,即将相同的代码提取到公共文件中,这样就可以大大发挥React Native的跨平台优势。
-
修改react native的安卓源码的终极方案!
2020-05-11 12:43:27如果按官方指导走来修改安卓源码然后从源码编译,可以要人老命,各种环境配置,麻烦程度堪称杀人利器。 本文将另辟稀径,解决这一麻烦。 一、新建一个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-qiniu源码修改(实现文件上传,上传策略等)
2017-12-11 19:25:39react-native 对七牛的扩展支持问题: react-native-qiniu 已经废弃好久了,没有人写,网上找到的也只能解决一点点问题,然后图片上传也存在着一系列的问题.参考着网上一些代码,我修改了其文件上传的部分.虽然可以在...react-native 对七牛的扩展支持
问题:
react-native-qiniu 已经废弃好久了,没有人写,网上找到的也只能解决一点点问题,然后图片上传也存在着一系列的问题.参考着网上一些代码,我修改了其文件上传的部分.虽然可以在服务端进行上传,但总觉得base64先上传到服务器,再通过服务器上传到网站的话,在图片很多的情况下会影响一些性能,而且也不是很方便修改后:
- 可以上传文件,自定义参数上传,在上传成功后可以正确获取到参数信息, token会正确生成
- 可以指定上传策略 如:returnbody等
- 错误时可以收到错误信息
- 增加进度显示,可以获取上传文件的进度
- 添加了回调函数,可以监听xmlhttprequest的readystate(没什么用)
注: - 原七牛网址:https://github.com/qiniudemo/react-native-sdk
使用步骤:
- 下载原react-native-qiniu npm i react-native-qiniu --save
- 替换目录里的两个文件rpc.js和auth.js
- 使用修改后API进行上传
如果是和我一样不知道如何使用七牛上传的小白可以参看以下官方文档:
- 上传策略部分: https://developer.qiniu.com/kodo/manual/1206/put-policy
- 直传文件部分:https://developer.qiniu.com/kodo/api/1312/upload
(react native实际上是使用formData 模拟表单来进行文件的上传)
如有其他问题欢迎留言,互相讨论进步
修改的代码部分
rpc.js
主要修改部分:- uploadFile函数重构
- 添加回调
- 处理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
主要修改部分:
- PutPolicy类重构为Policy类
- 修改构造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 }
使用方法部分
- 自定义参数使用 _ 开头
- 值全部为字符串形式,如"${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 } */ }); }
-
React Native学习之StackNavigator 标题源码修改
2017-11-23 11:36:00StackNavigator,相信大家都用过不多说,我是小米测试机,用的时候发现在有返回图标的时候,标题设置了居中,依然会向右便宜,解决方法如下图: 注释Header.js这段代码,这里left , right 始终应该为0,不管有... -
react-native react-native-modal-dropdown级联扩展
2018-01-22 17:39:20react-native没有提供...在源码基础上做了一些修改。 react-native-modal-dropdown版本为0.6.0 级联出现异常现象的原因为,defaultValue和buttonText的配合没有加入级联的逻辑,导致无法级联显示不正常 新增but -
React Native调试源码分析——HMR
2019-04-16 15:00:171、前言 上次的远程加载简单描述了app reload(开发时运行也是一个逻辑)和MetroServer...它能让你在修改代码后马上在app上展现结果而且不会丢失状态。 2、HMR通讯方式 先看其创建的位置,也是在runServer中 ... -
react-native-tag-select修改源码的代码.rar
2020-10-24 14:15:36react-native-tag-select修改源码的代码,标签选中取消状态,用过该标签的大概知道是什么用法,会用文档介绍一个例子 -
ReactNative: 编译源码项目
2019-08-11 12:22:24有的时候我们需要通过修改源码来完成某些业务需求,并上传maven仓库,以便项目的引用,这样就需要成功编译源码。 首先克隆react-native项目到本地,下载地址https://github.com/facebook/react-native 我使用的... -
react-native-google-sign-in:用于最新的Google登录OAuth SDK API的React Native Wrapper-源码
2021-02-04 01:53:20React Native Wrapper for最新的Google登录SDK 无法正常工作,并且不再维护( ),所以我自己创建了这个。... 以下某些修改应通过react-native install自动完成。 如果没有,请自己做: 将google-ser -
react-native-geth:React Native的以太坊轻客户端实现-源码
2021-02-05 08:25:28RNGeth使通过React Native轻松使用 (以太坊协议的正式Go实现)成为可能。 什么是React-native-geth? 是一个React-Native模块,可让您构建dApp(去中心化应用程序),将移动设备转换为以太坊网络上的轻客户端节点... -
解决react-native 每次修改完源码后,其他同事无法用,重新npm install无法用的问题
2019-12-03 15:39:59react-native 修改完源码后,如何让其他同事直接能用,每次都发过去修改的node源文件肯定是不方便的,这里分享个脚本 其实我们需要达成的目的是修改NodaModule l的源码其他人也在,但是NodaModule 文件肯定是忽略的... -
React native react-native-scrollable-tab-view ScrollableTab 默认不显示指示器问题
2018-04-16 11:04:34在初始化过后可能会出现此问题,解决方案参考一位 GitHub 的 Issues需要修改ScrollableTabBar源码: 将this.updateView({value: this.props.scrollValue._value, }); 替换为: this.updateView({value: this.... -
magento-react-native:适用于Magento 2.x的React Native移动应用-源码
2021-02-05 11:12:43适用于Magento 2的开源React Native移动应用 Magento React Native是适用于您的Magento 2网站的功能齐全的电子商务应用程序。 它使用来分发目录,产品,将产品添加到购物车,下订单等等。 :megaphone: 宣告 这个... -
React Native之react-navigation动态修改标题、页面导航等
2019-06-16 20:55:10目录 1.navigation导航对象相关参数 ...1.2.3源码 1.3params 1.4navigation的state属性 2.动态修改标题-title或者左右显示组件-headerRight 2.1动态修改标题 2.2动态修改左右显示组件-headerRi... -
react-three-fiber-纤维:Three Three.js的React渲染器(Web和react-native)-源码
2021-02-01 06:25:49react-three-fiber是针对Web上的threejs和react-native的React。 npm install three react-three-fiber 这些演示是真实的,您可以单击它们! 它们也包含完整的代码。 为什么? 使用可重用的组件以声明方式构建... -
react_native_weibo:使用React本地制作的微博客户端-源码
2021-03-01 17:36:47基于React Native制作的微博客户端 因为微博授权权限设置,本人的微博开放者账号权限太低,如果出现'api请求次数替换,请更换。 10023'弹框或授权界面错误,需要自行更换开放者应用的appkey,授权放置页,App Secret... -
React源码分析-渲染篇
2018-04-14 16:07:30ReactJS和React-Native的区别 React是由Facebook推出的一个JavaScript框架,主要用于前端开发。 React采用组件化的方式简化web开发 1.DOM:每个HTML页面可以看作为一个DOM 2.原生的web开发的方式。HTML一个... -
《React Native跨平台移动应用开发》源码
2017-02-10 20:01:11去年拿到书后很快就看完了,然后书就一直放着。...主要涉及两部分:native和React Native通信,封装native UI组件 源码: native和React Native通信:https://github.com/xuechinahb/react-native-exampl -
react-native-photos-framework:用于React Native的现代而全面的CameraRolliCloud-library-API-源码
2021-02-05 11:12:39v0.40中的react-native标头导入已更改,这意味着要打破所有更改! 。 此库已更新为可与新导入一起使用。 如果您的<RN 0.40,请使用版本<0.0.64。 描述 从CameraRoll和iCloud加载照片/视频等。 使用Apples照片... -
react-native-version::1234:以`npm version'方式对React Native或Expo应用程序进行版本控制-源码
2021-01-30 19:42:17$ npm install react-native-version --save-dev # or $ yarn add react-native-version --dev 在应用程序的package.json中挂入“ version”或“ postversion” npm脚本: { "name": "AwesomeProject", "version... -
react-native-modal-translucent:在Android上删除Modal的StatusBar背景-源码
2021-02-05 11:11:35React本机模式半透明 ... react-native link react-native-modal-translucent 现在运行该应用程序并查看效果。 警告 如果您的本机版本低于0.57,则需要更新android gradle。 首先,修改您的android / build.g -
React Native清除缓存库react-native-http-cache使用
2018-11-06 15:06:181.react-native-http-cache:https://github.com/reactnativecn/react-native-http-cache 2.针对android的问题进行修改 按照文档安装之后,android会报方法getMainDiskStorageCache()找不到问题 解决办法: 改源码,...