reactnative专题
EXPO 结合 Alova请求库 快速搭建ReactNative开发平台
alova 是一个轻量级的请求策略库，目标是让接口的管理和使用变得非常简单。 1、安装 npm install alova --save 2、 使用 useRequest 发送一个请求 import { useRequest } from 'alova'const { send: followAuthor } = useRequest((wtNo, status) => follo
Expo 开发ReactNative 后切换 eas 账号
修改slug app.json中的sulg字段更新为新账号应用sulg 修改projectId app.json中的extra.eas.projectId字段更新为新账号应用projectId 退出账号： eas logout 重新登录： eas login
ReactNative系列
基础 prototype原型链props详解Refs闭包module.exports与exports, export与export default的区别this与bind(this)组件中使用事件函数Component和PureComponent的区别shouldComponentUpdate机制setStatePromise详解React Redux UI界面系列 ReactNative自
将ReactNative项目打包生成jsbundle
文章目录 将ReactNative项目打包生成jsbundle前言打包命令 ️ReactNative系列-文章 将ReactNative项目打包生成jsbundle 前言 在进行原生开发时，我们可能需要在原生项目加载RN的代码，那么需要将RN项目打包成bundle文件，然后由原生对此引用。 打包命令 使用 react-native bundle --help 来查看
ReactNative自定义组件
文章目录 ReactNative自定义组件组件例子标题组件LinearLayout组件 性能优化渲染优化 ReactNative系列-文章 ReactNative自定义组件 组件 一个ReactNative的APP界面其实是各种组件的组合，但是官方给我们提供的组件或许在样式或功能上不能满足实际的需求，所以在开发过程中，我们不可避免的需要写一些新的组件以满足项目需求。那
ReactNative进阶（二十八）Metro
文章目录 一、前言二、Metro生命周期2.1 解析(Resolution)2.2 转换(Transformation)2.3 序列化(Serialization) 三、拓展阅读 一、前言 众所周知，Metro 是 React Native 默认的 JavaScript 打包模块。对于前端项目，打包工具已有webpack(大而全，图片代码打包)，rollup(专攻代码打包,框架
ReactNative 启动白屏解决方案 react-native-splash-screen
安装 1.添加 yarn add react-native-splash-screen 2.自动link react-native link 或者 react-native link react-native-splash-screen 修改原生代码 Android: 通过以下更改更新MainActivity.java以使用react-native-splash-screen:
ReactNative 自定义标题栏 ReactNative 自定义导航栏
先上代码，配合代码讲解一下使用方法， github地址：https://github.com/lizhuoyuan/react-native-navigationBar 我这有用到一个屏幕适配工具类，自己写的，使用方法和代码 请点这里 /*** Created by 李卓原 on 2018/7/6.* email: zhuoyuan93@gmail.com**/import Reac
ReactNative 热更新，集成CodePush
开篇先介绍另外一种热更新方式：pushy， 这是rn中文网推荐的，phshy集成方法 CodePush简介 CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。 CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新 (J
ReactNative面试题
1 . 打印出a的值是? if(true){let a = 1} alert(a) 答: a is not defined let不存在变量提升，且作用域只在代码块 这样看你可能有点不太清楚,我们来格式化代码 if (true) {let a = 1}alert(a) 这样是不是一目了然了?! 博主第一看的的时候没有仔细看,匆匆就写了个1 ,尴尬. 扩展 1.var 语句用来
ReactNative 原生UI组件 桥接原生 Android
React Native已经封装了大部分最常见的组件，譬如ScrollView和TextInput，但不可能封装全部组件。而且，说不定你曾经为自己以前的App还封装过一些组件，React Native肯定没法包含它们。幸运的是，在React Naitve应用程序中封装和植入已有的组件非常简单。 原生视图需要被一个ViewManager的派生类（或者更常见的，SimpleViewManager的派
ReactNative 封装fetch网络请求
封装的fetch方法类 /*** Created by 卓原 on 2017/11/14.* zhuoyuan93@gmail.com*//*** 注意这个方法前面有async关键字* @param url 请求地址* @param body 请求参数* @param method 请求方法 大写* @param successCallBack 网络请求成功的回调* @param error
ReactNative封装的优雅居中/底部弹出框
/** @Date: 2019-08-30 16:05:37* @Description: 真的不想每次都写个Modal了。* @Author: zhangji* @LastEditors: ZhangJi* @LastEditTime: 2019-09-02 11:16:51*/import React from "react";import _ from "lodash";import {
ReactNative集成到已有iOS项目
最近在维护一个项目，需要引入ReactNative开发新UI。记录一下过程，表示我搞过。V 需要安装node环境 brew install nodenpm install -g yarn 接着创建一个目录用来保存工程文件，并在目录项目下面创建一个package.json文件 mkdir democd demonpm init 加下来安装react native必须的库, 0.7
reactNative插件总结
Toast: react-native-easy-toast CheckBox: 'react-native-check-box' 主界面下面有四个Navigator: react-native-tab-navigator react-native-scrollable-tab-view
在Android原生应用上接入ReactNative实践
在Android原生应用上接入ReactNative实践 一、安装nodejs, npm. Linux sudo apt install nodejs Mac brew install node 检查安装 node -vnpm -v 设置国内淘宝源 npm config set registry https://registry.npm.taobao.org 二、在p
ReactNative 测量组件的宽度，高度，位置。
1.测量组件的宽度，高度，位置。 setTimeout(() => {UIManager.measure(findNodeHandle(this.myComponent), (x, y, width, h, pageX, pageY) => {console.log('x:' + x);console.log('y:' + y);console.log('width:' + width);con
ReactNative安装和使用
可以先参考 http://zhuanlan.zhihu.com/FrontendMagazine/19996445 这篇文章 1.本地下载有Xcode工具，到git 上 https://github.com/facebook/react-native 克隆仓库，或者下载一个 zip 压缩包文件 2.https://nodejs.org/en/ 下载nodejs 安装 3.使用 Homebr
ReactNative初次搭建环境及遇到的问题
1.环境搭建参考：react-native中文网 2.初始化项目 react-native init AwesomeProject cd AwesomeProject react-native run-android 3.初始化项目遇到的问题 3.1 Unable to load script from assets index.android.bundle on windows 解
ReactNative调用android原生View
RN开发过程中，React Native是将原生控件封装桥接成JS组件来使用的，这保证了其性能的高效性。但是有时候官方封装的常用组件不能满足需求，就需要结合原生UI使用，例如：对原生实现的UI复用；复杂UI仍然需要原生自定义View实现。接下来就简单记录下RN开发过程中调用原生UI的流程。 例如下面这个UI效果，就需要用到Android原生自定义View实现： 以上图实现效果为例，分别从An
ReactNative手势上滑隐藏下滑显示
一、实现效果 二、实现方式 1 使用RN的panResponder组件来实现手势滑动 2 在constructor中初始可变组件的属性值和stytle constructor(props) {super(props);this.thresholdMin = 5;this.thresholdMax = 20;this.sapceInitHeight = 130;this.spac
ReactNative库版本的升级与降级
一、版本升级 查看当前版本 react-native -version 2.查询react-native的npm包得最新版本 (react native的npm包的地址为:https://www.npmjs.com/package/react-native)，或者采用命令npm info react-native进行查看,具体截图如下: 安装指定版本的react-nati
ReactNative 样式布局小结
在ReactNative中的一些样式布局问题总结 创建样式 const styles = StyleSheet.create({container: {backgroundColor: "#eae7ff",flex: 1}}); 应用样式 render() {return (<View style={styles.container}></View>);} 样式详解 如果给最外
[reactNative]unable to load script from assets ‘index.android.bundle’
unable to load script from assets ‘index.android.bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server 0x0001 产生原因，缺少bundle,为啥缺少，不知道。 0x0002 解决： 1. 在Android/ap
reactNative和5+runtime（native.js）对比
1.首先我们来了解这两个东西是什么？ native.js：简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。 我们知道js具有局限性，它对移动硬件设备的使用功能有限，其实这种限制并不是是说js本省有限，而是浏览器出于安全考虑限制掉了这些功能，试想一下你不小心点到一个恶意网站，然后在你不经意间调用了你的摄像头给你拍了一张照片，还获
ReactNative跳转链接，判断目标是否存在
Linking.canOpenURL(url).then(supported => { if (!supported) { console.log('Can\'t handle url: ' + url); } else { return Linking.openURL(url); } }).catch(err => console.error(