React Native
Volon Kou
这个作者很懒,什么都没留下…
展开
-
Google play重置上传秘钥教程
Google play重置上传秘钥教程原创 2023-03-03 12:11:03 · 1328 阅读 · 0 评论 -
React Hooks 异步操作踩坑记
React Hooks 是 React 16.8 的新功能,可以在不编写 class 的情况下使用状态等功能,从而使得函数式组件从无状态的变化为有状态的。 React 的类型包 @types/react 中也同步把 React.SFC (Stateless Functional Component) 改为了 React.FC (Functional Component)。通过这一升级,原先 class 写法的组件也就完全可以被函数式组件替代。虽然是否要把老项目中所有类组件全部改为函数式组件因人而异,但新写原创 2021-06-28 16:25:15 · 742 阅读 · 0 评论 -
ReactNative 在IOS模拟器上 图片不显示
Xcode升级后,ReactNative 在IOS模拟器上看不到图片(静态图片和网络图片)解决方法1、第一种:修改node_modules中react-native/Libraries/Image/RCTUIImageViewAnimates.m文件if(_currentFrame){ //275行 layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_c原创 2021-02-25 11:51:07 · 819 阅读 · 0 评论 -
react native中添加自定义字体
1、在项目根目录下,创建文件夹assets/fonts,并且把所需要的字体文件(.ttf)放进来,2.ios端(1)将字体文件添加到工程目录中,在工程中的项目文件下下创建Fonts文件夹,将字体文件添加进去(2)在info.plist中添加<key>UIAppFonts</key> <array> <string>Barlow-Regular.ttf</string> <string>Barlow-Black.tt原创 2020-12-07 10:31:27 · 1534 阅读 · 0 评论 -
react native 做用户列表
需求:从API上请求下来的用户数据,做成一个类似通讯录的模式请求下来的数据格式://获取数据的方法CustomerList().then(res => { let data = res.data var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split(""); var segs = []; // 存放数据 var res = {};原创 2020-12-03 11:27:31 · 198 阅读 · 0 评论 -
react narive获取本地文件并上传到服务器
工作中遇到要在APP中上传Excel的需求,找了老半天,试过react-native-fs,但是不好用,要么就是只能上传图片的,后来发现这个第三方库完美的符合需求,他不仅可以上传Excel,基本上现有的文件他都可以吧!具体查看文档!这个库就是:react-native-document-picker用法举例:先install下来:npm i --save react-native-document-picker在iOS文件夹下 pod安装pod install导入文件import Docu原创 2020-12-03 10:55:58 · 929 阅读 · 2 评论 -
React Native0.59以前版本上架失败,邮件提示ITMS-90809
邮件提示内容:ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview).看到这个不要慌,是老版本的RN 使用的UIWebVie原创 2020-07-20 22:12:58 · 633 阅读 · 0 评论 -
React Native搭建基础环境+Redux全局配置
备注:本基础环境建立在一位慕课大佬讲解的项目基础上,通过详细的阅读其源码,重新构建出来的,风格类似,写出来仅仅是为了防止以后遗忘,以及尽可能帮助到一些初学者!不喜勿喷,拜托????可到github上查看源代码:https://github.com/volonkou/BaseApp一、项目基础环境构建1.根据官方文档先init一个项目出来:中文文档,有任何问题请详细查看文档哈init命令:(最新版的react native包含CocoaPods,初始化时间有点长,得耐心等待一会)npx react-原创 2020-07-17 11:09:15 · 533 阅读 · 0 评论 -
Xcode版本问题:Unknown argument type ‘__attribute__‘ in method -[RCTAppState getCurrentAppState:error:].
遇到的问题:Xcode版本升级后,在Xcode上点击build时遇到以下问题:Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.如图:解决的方法:1.在Xcode中打开:Xcode打开RCTModuleMethod.mm文件:路径Libraries->React.xcodeproj-原创 2020-07-11 09:29:50 · 1097 阅读 · 0 评论 -
react native字体图标react-native-vector-icons的使用
GitHub地址:https://github.com/oblador/react-native-vector-icons图标参考地址:https://oblador.github.io/react-native-vector-icons/一、下载和引用yarn add react-native-vector-icons# RN >= 0.60npx pod-install# RN < 0.60react-native link react-native-vector-icons原创 2020-07-05 16:56:01 · 4322 阅读 · 4 评论 -
React Native 快速搭建商城项目基础结构
一、init指定项目版本(如果直接使用最新版可不要后缀 --verbose --version 0.52.0)react-native init demo --verbose --version 0.52.0二、引入必要插件cd demo/npm install axios react-native-elements react-native-vector-icons react-n...原创 2019-11-15 15:28:24 · 158 阅读 · 0 评论 -
React Native Android 阴影不显示问题
使用插件:react-native-shadow1.安装 react-native-shadownpm install react-native-shadow2.安装react-native-svgnpm install react-native-svg3.将react-native-svg链接如项目react-native link react-native-...原创 2018-08-08 16:23:49 · 1836 阅读 · 0 评论 -
react-navigation禁止侧滑
在createStackNavigator后加上一下方法: defaultNavigationOptions: { gesturesEnabled: false, },原创 2019-07-11 15:42:53 · 2161 阅读 · 0 评论 -
最新版React-navigation报错:Invariant Violation: The navigation prop is missing for this navigator.
使用createStackNavigator这个组件时出现了如下错误:错误原因:在react-navigationV3中,需要手动添加createAppContainer解决方案:原创 2019-07-24 16:28:33 · 578 阅读 · 0 评论 -
react native:运行react-native run-ios报错Error: Could not find iPhone X simulator解决办法
报错代码:Found Xcode project ****.xcodeprojCould not find iPhone X simulatorError: Could not find iPhone X simulator at resolve (/Users/路径/node_modules/react-native/local-cli/runIOS/runIOS.js:149...原创 2019-08-08 10:53:24 · 2321 阅读 · 0 评论 -
react-native run-android 时报错 AAPT: error: resource android:attr/fontVariationSettings not found.
解决方案:在android/app/build.gradle文件中加入以下代码configurations.all { resolutionStrategy { force 'com.google.android.gms:play-services-gcm:16.1.0' force 'com.google.android.gms:play-serv...原创 2019-08-06 18:01:18 · 5041 阅读 · 0 评论 -
使用alita 将React Native项目转化为小程序
1.通过npm全局安装alitanpm install -g @areslabs/alita2.官方文档说明可以直接通过react native init一份项目直接转化,不过试了试,有问题,小程序一直报未找到入口文件 app.js,所以尽量使用alita官方提供的examples文件,所以可以clone一份HelloWorldRN,将文件名改为你的项目名就可以了:比如Demo3.使用命令...原创 2019-08-14 10:15:31 · 2041 阅读 · 1 评论 -
React Native在使用react-navigation,android编译时报错:react-native-gesture-handler:compileReleaseJavaWithJava
错误描述:React Native在使用react-navigation时要使用到react-native-gesture-handler,但是在android编译时会报错:react-native-gesture-handler:compileReleaseJavaWithJava解决方案:在项目根目录输入命令:npm i jetifiernpx jetify...原创 2019-08-19 10:34:49 · 936 阅读 · 0 评论 -
react native打包是报错:com.android.builder.internal.aapt.AaptException: libpng error: Not a PNG file
在终端的报错信息:> Task :app:mergeReleaseResources Error: java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.AaptException: libpng error: Not a PNG fileFAILURE: Build failed wi...原创 2019-08-07 17:12:45 · 302 阅读 · 0 评论 -
React Native Android打包时报错:Execution failed for task ':app:lintVitalRelease'.
报错截图:解决方案:在android/build.gradle文件中的android方法下加上以下方法即可:lintOptions { checkReleaseBuilds false abortOnError false }原创 2019-08-23 17:16:48 · 917 阅读 · 0 评论 -
React Native视频加字幕(内加外)
直接贴代码吧:import React from 'react';import {View, ScrollView} from 'react-native';import axios from "axios"import {Header} from "../common/ItemHeader";import Video, {TextTrackType} from 'react-nativ...原创 2019-06-25 17:28:28 · 583 阅读 · 0 评论 -
React Native开发阶段屏蔽黄色警告干扰
在项目的index页面中写入以下代码:console.disableYellowBox = true // 关闭全部黄色警告原创 2019-05-17 10:19:58 · 613 阅读 · 0 评论 -
React Native 使用Image标签是对uri进行判空
判断对象不为空的方法: /*判断对象为空*/ isEmpty(obj){ if(typeof (obj) != 'number' &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; (!obj || obj == null || obj == ' ' || obj == undefined || typeof (obj) == 'undefined')){ return tru...原创 2018-09-28 14:54:00 · 1327 阅读 · 0 评论 -
React Native双系统图片下载
使用的插件:1.IOS端:ReactNative API中的CameraRoll2.Android端:react-native-fs引入方法:import {CameraRoll} from "react-native"import RNFS from 'react-native-fs';用法<TouchableOpacity onPress={() =>...原创 2018-09-21 09:13:16 · 462 阅读 · 1 评论 -
react native 经常遇到的run失败的坑
经常run失败显示的内容: 解决方法: 1.运行命令: rm ./node_modules/react-native/local-cli/core/fixtures/files/package.json2.点击模拟器上的Reload JS或者重新react-native run-ios...原创 2018-08-28 09:10:40 · 452 阅读 · 0 评论 -
react-native 实现渐变色背景
使用react-native-linear-gradient插件1.安装npm react-native-linear-gradient2.链接react-native link react-native-linear-gradient3.代码使用 <LinearGradient colors={["#57AFFF","#2A63BF","#042289"]}...原创 2018-08-17 16:13:53 · 9804 阅读 · 0 评论 -
React Native 测量组件的宽高
首先在图中有个onLayout方法,这里面携带的就有宽高信息代码如下:<View onLayout={({nativeEvent:e})=>this.layout(e)}></View>方法如下:layout=(e)=>{ console.log(e) }结果如下:...原创 2018-08-02 14:37:11 · 849 阅读 · 0 评论 -
React Native集成极光消息推送
极光ios消息推送 证书一键生成:https://onesignal.com/provisionator原创 2018-07-27 17:14:49 · 3578 阅读 · 0 评论 -
RN项目 iOS端网络请求失败问题
Http路径图片不显示问题:打开xcode 项目中的info.plist >App Transport Security Settings 点击+号,添加Allow Arbitrary Loads并选择YES HTTP路径请求网络数据提示网络错误; 在以下路径添加配置 NSIncludesSubdomains NSTemporaryExceptionAllowsInsecur...原创 2018-04-16 19:04:08 · 1107 阅读 · 0 评论 -
react-navigation实现正编辑页面修改数据后,列表页自动更新
1.正向传值以及配置callback2.第二个页面调用原创 2018-12-21 10:17:27 · 1075 阅读 · 0 评论 -
redux数据操作
action,reducer,store与页面之间的数据传递action代码: `import axios from”axios”; const url=”http://localhost:3000/users”; export const GET_POSTS=”GET_POSTS” export function getPost(){ let request=axios.原创 2017-10-11 11:01:22 · 1038 阅读 · 0 评论 -
Android SDK AndroidStudio 国内可用的镜像/代理地址
http://www.androiddevtools.cn/ 一站式下载地址,齐全Android SDK在线更新镜像服务器1.中国科学院开源协会镜像站地址:◦IPV4/IPV6: mirrors.opencas.cn 端口:80◦IPV4/IPV6: mirrors.opencas.org 端口:80◦IPV4/IPV6: mirrors.opencas.ac.cn 端口:802.上海GDG镜像服务转载 2017-11-08 15:12:35 · 32801 阅读 · 1 评论 -
reactNative 报错提示:ReactNative:The development server returned response error code: 500
解决方法: 1.将babel-preset-react-native的版本改为:2.1.0 2.运行 :npm install 3.运行:react-native run-android原创 2017-08-28 17:20:45 · 2398 阅读 · 0 评论 -
react-native NavigatorIOS 使用方法
import React, {Component} from 'react';import { Platform, StyleSheet, Text, View, NavigatorIOS, TouchableOpacity} from 'react-native';export default class App extends Compo...原创 2018-03-29 17:08:44 · 352 阅读 · 0 评论 -
react父组件调用子组件方法
import React, {Component} from 'react';import {Text, View, TouchableOpacity} from 'react-native';export default class Parent extends Component { render() { return( &lt;View...原创 2018-07-05 18:55:42 · 3342 阅读 · 0 评论 -
添加微信SDK IOS启动报错
添加微信SDK后 IOS启动报错:解决方案:添加 libsqlite3.dylib添加步骤:1.如上图 在targets => Build Phases =>Link Binary With Libraries下点击加号2.选择Add Other3.CMD + SHIFT + G 然后输入 /user/lib 点击GO4.找到 libsqlite3.dylib 并...原创 2019-03-05 16:37:23 · 221 阅读 · 0 评论 -
React Native 键盘挡住输入框解决方法
一、使用ref 选中外层的ScrollView标签二、在componentDidMount方法中对键盘进行监听 // 监听键盘 this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardDidShow); this.keyboardWillHide...原创 2019-02-20 09:35:38 · 857 阅读 · 0 评论 -
React Native 集成react-native-wechat微信分享、支付
一、应用申请审核首先微信开发平台去注册账号并且创建一个移动应用。(地址:https://open.weixin.qq.com)将所必填的信息填写完整,应用名称以及中英文(英文是选填的)的信息,移动应用图标分别为28x28何108x108的png格式图标继续点击下一步填写iOS项目的bundle ID以及android项目的包名和应用签名二、获取应用签名1.申请keystore,在终...原创 2019-02-14 09:36:30 · 1776 阅读 · 1 评论 -
RN项目 iOS端真机模拟 xcode上配置
以下三个地方按下图选择即可原创 2018-04-16 18:50:20 · 1813 阅读 · 0 评论