关注
分享
当前专栏记录开发React Native App中遇到的所有问题以及解决方式，从开发环境配置到应用上线整个过程
Museions
带着目的去思考！预谋即将发生的事情！
展开
-
react-native应用签名与打包apk(十五)
转载：将 React Native 应用签名打包成 APK注明：本文的react-native签名方案基于mac os，在windows下，java命令与生成签名文件的命令是一致的可以通用，生成的.keystore文件可以自定义，生成apk的方式因人而异，这个主要视.json配置文件而定。Android要求所有应用都有一个数字签名才会被允许安装在用户手机上，所以在把应用发布到类似Googl...转载 2019-11-19 16:11:14 · 1917 阅读 · 0 评论 -
react-native开发目录工程化,命令行工程化配置(十三)
react-native开发目录工程化,命令行工程化配置1.react-native开发目录srcsrc |_component ---自定义组件 |_const ---常量数据 |_utils ---配置文件 |_views ---路由视图 |_tools ---工具函数/*仅供参考，目录可体现模块属性即可*/2.命令行工程...原创 2019-11-19 15:59:25 · 206 阅读 · 0 评论 -
react-native使用第三方库以及引入react-native-elements(十二)
react-native使用第三方库以及引入react-native-elements1.首先需要下载依赖包到本地cd /projectyarn add react-native-elements# or with npmnpm install react-native-elements2.引入react-native-elements到项目的component中User...原创 2019-10-29 17:23:29 · 2267 阅读 · 0 评论 -
react-native自定义组件组件传值(十)
react-native自定义组件组件传值react-native使用JSX的模版语法，自定义组件模块是最常见的组织代码方式，同时使用自定义组件也可以使数据模版高效复用，交互变得更加统一，下面是常见的自定义组件封装方式：1.react组件可以是变量var FaceDetect = Function||Class||Module;<FaceDetect />2....原创 2019-10-23 16:12:18 · 1093 阅读 · 0 评论 -
react-native网络请求fetch使用(十一)
react-native网络请求fetch使用封装拦截器;fetch常见使用方式：Typescript方式使用fetch拦截器:export class FetchInterceptor { public interceptors: any[] = []; public interceptor(fetch: (input: RequestInfo, init?: Requ...原创 2019-10-23 15:10:15 · 1070 阅读 · 0 评论 -
react-native创建APP启动页欢迎页(四)
react-native创建APP启动页欢迎页react-native创建欢迎页或者启动页的本质是创建一级初始导航，步骤如下：1.安装react-navigation模块并引入>$ npm install react-navigation --save>$ import {createSwitchNavigator} from 'react-navigation';...原创 2019-08-18 21:18:01 · 1951 阅读 · 0 评论 -
react-native连接终端或模拟器调试项目(三)
react-native连接终端或模拟器调试项目这里使用.连接真机调试.真机调试要确保开启调试权限，并且允许usb安装未知来源的应用。A 以下是启动真机调试步骤：新建终端一>$ npm start //启动node模块依赖调试环境 30s等待依赖模块加载进来新建终端二:>$ react-native run-android //启动真机调试接下来等待...原创 2019-08-18 18:19:08 · 895 阅读 · 0 评论 -
react native底部导航阻止后退回到初始路由
问题：react native底部导航默认回退按钮路由返回使用场景：底部导航路由中一般都是一级路由 因此返回时应该退出或者提示即将退出解决方式：配置：TabNavigatorConfigbackBehavior:false//原创 2019-07-25 12:19:11 · 916 阅读 · 3 评论 -
Package com.** signatures do not match previously installed version; ignoring
Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package com.carrier signatures do not match previously installed version; ignoring!];问题描述：react native添加签名后无法安装离线包 adb install *release.apk解决方式：(1)卸...原创 2019-07-25 11:45:03 · 15312 阅读 · 0 评论 -
ReactNative:The development server returned server returned response error code: 500
The development server returned server returned response error code: 500 ：react native 调试报错问题原因：监听的8081端口号未正常开启，在此类项目中的具体表现原因应该是 ：（1）项目依赖未找到（2）react native没有编译完成对应的终端控制台显示如下：解决方式：1.重要、...原创 2019-07-25 09:40:44 · 988 阅读 · 0 评论 -
Error: Activity class {com.**/com.**.MainActivity} does not exist
react-native 运行报错：Error: Activity class {com.**/com.**.MainActivity} does not exist实际上到这里资源已经编译完成了，只是并未安装到调试设备上。笔者手机：redmi note7就出现过这个状况！手机设置状态：（1）开发者模式：开启（2）USB调试：开启（3）允许USB安装：是（4）允许安装未知来源应用...原创 2019-07-25 09:45:36 · 1890 阅读 · 0 评论 -
Unable to load script.Make sure you’are either running a Metro server(run ‘react-native start’)….
react-native报错:Unable to load script.Make sure you’are either running a Metro server(run ‘react-native start’)….可能的原因：直接在项目下运行：react-native run-android解决办法：1.执行$ react-native start$ re...原创 2019-07-20 10:18:33 · 1309 阅读 · 0 评论 -
react-native初始化项目(二)
1.初始化react native项目的方式：react-native-cli2.添加项目依赖//npm安装$ npm i *** —save或者 //yarn安装yarn add **3.启动项目❗️此操作请连接手机真机调试；打开手机的调试模式react-native run-android待编译完成后，连接调试的手机回询问是否安装apk，授权...原创 2019-07-16 17:55:00 · 514 阅读 · 0 评论 -
react-native搭建开发环境(一)
1.安装nodebrew install node//检查node -v//简单测试$ node> 1+1> 22.安装watchmanbrew install watchman3.安装yarn、react-native-clinpm install -g yarn react-native-cli4.安装JDK 详细安装方式wind...原创 2019-07-16 17:54:45 · 4580 阅读 · 0 评论 -
react native:Make sure you have the Android development environment set up
Make sure you have the Android development environment set up...react native运行出现错误提示请确认你已经配置好安卓开发环境.....出现这个原因是由于安卓编译环境缺失：！！！具体可能是没有安装安卓开发sdk或者是没有配置安卓sdk环境变量解决方式：1.正确安装安卓开发sdk2.配置好安卓sdk环境变量详细...原创 2019-07-16 17:56:16 · 6837 阅读 · 0 评论 -
isTrusted=false onMessage postMessage -解决方案
{"isTrusted": "false"} H5嵌套在react native app webview中时，app与HTML之间通信.出现这个原因是在html端使用 JSON.stringify（data），并且两个目标平台不同源。isTrusted=false window.onMessage window.postMessage解决方式原创 2019-04-27 14:11:23 · 9063 阅读 · 1 评论 -
react native分享实现微博分享,QQ分享,微信分享、朋友圈分享[图文分享]
react native分享,友盟sdk社会化分享,微博,QQ,微信分享,分享sdk的集成方式对于前端开发者是怎么样的呢？接下来看看react native前端如何实现集成友盟分享sdk，请耐心看完绝对是干货。由于我在集成这个的时候碰到太多的坑，都是参照简书，CSDN等博客，却发现那些是给android开发者看的，☁️☁️☁️以下是以微信安卓为例react native分享SDK第一步...原创 2018-12-20 13:15:19 · 3508 阅读 · 4 评论 -
实测解决-Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2)
使用Android Studio开发react native项目时遇见以下报错,轮番查找仍旧无法解决！Could not resolve all files for configuration ':classpath'. > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:2...原创 2019-01-05 13:36:29 · 999 阅读 · 0 评论 -
react-native布局样式stylesheet使用(九)
react-native布局样式stylesheet样式属性支持大部分的css3.0样式，主要通过Stylesheet模块实现。导入：import { StyleSheet } from 'react-native'定义：const styles = StyleSheet. create({ stylename1:{}, stylename2:{}})...原创 2019-09-02 11:15:26 · 1453 阅读 · 0 评论 -
react-native模块添加,导入导出模块(八)
react-native模块添加,导入导出模块AMD与CMD区别看这里。1.模块导出的方式export default ..//单一模块export default { module,module }...单模块多实现export module1export module2//连续导出多模块export function a(){}export funct...原创 2019-08-28 17:19:11 · 665 阅读 · 0 评论 -
react-native创建二级页面设置路由导航(六)
react-native创建二级页面设置路由导航1.创建一个二级页面user-info.js<View> <Text>user-info</Text></View>export default UserInfo2.接下来就是如何在user中把这个二级页面打开注意：在user.js页面能进入另一个页面的前提是 user页...原创 2019-08-26 21:38:51 · 851 阅读 · 0 评论 -
react-native屏幕适配文本间距适配(七)
react-native屏幕适配文本间距适配react native提供了一个类似于手机web端的媒体查询API模块PixelRatio,同时也提供了一个Dimensions原生API，可以利用这两个API模块实现屏幕适配。思路：1.文本缩放适配获取设备的像素密度 获取屏幕的宽度dp 字体大小缩放比例 根据dp值获取屏幕实际的像素值 计算实际屏幕像素与设计稿的宽度像素值比率...转载 2019-08-28 16:52:39 · 2309 阅读 · 0 评论 -
react-native创建底部导航标签页(五)
react-native创建底部导航标签页 react-navigation创建底部导航路由1.先创建导航对应的组件页面例如:有2个tab页面组件 Home，User ，home/index.jsclass Home extends React.component{ render(){ return( <View><...原创 2019-08-26 21:17:10 · 485 阅读 · 0 评论