![](https://img-blog.csdnimg.cn/20190920105232195.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
ReactNative
文章平均质量分 70
ReactNative相关
北海之灵
这个作者很懒,什么都没留下…
展开
-
ReactNative使用bottom-tabs搭一个简单的框架
基于react-navigation/bottom-tabs 等组件搭建的一个ReactNative 框架原创 2022-07-11 17:57:42 · 935 阅读 · 1 评论 -
《ReactNatve》使用react-native-fs下载文件
1.安装react-native-fs注意版本,npm上是这样描述的。For RN < 0.57 and/or Gradle < 3 you MUST install react-native-fs at version @2.11.17!For RN >= 0.57 and/or Gradle >= 3 you MUST install react-nati...原创 2020-01-02 15:05:43 · 3037 阅读 · 1 评论 -
《ReactNative》扫描二维码以及识别相册二维码
用react-native-camera 库可以实现用相机扫描二维码的功能用react-native-image-crop-picker库选取相册二维码图片用react-native-local-barcode-recognizer解析二维码图片如果只需要扫描二维码,不需要识别相册中的二维码图片,只安装react-native-camera库就好installnpm inst...原创 2019-10-12 16:16:13 · 2493 阅读 · 1 评论 -
《ReactNative》之AsyncStorage的封装
AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统,它对于App来说是全局性的。它用来代替LocalStorage。安装npm install @react-native-community/async-storage1.封装为DeviceStorage.js类import AsyncStorage from '@react-native-co...原创 2018-05-25 17:46:46 · 2430 阅读 · 1 评论 -
《ReactNative》之混合开发多入口跳转问题
在Android原生应用中集成ReactNative时,可能会有这样的需求,就是在原生端多个入口都需要进入RN界面,在这种情况下,多次使用AppRegistry注册RN应用会出现问题。解决方法:只需要编写一个ReactActivity,通过原生向RN端传值的方式跳转不同的RN界面。这样RN端的入口也只有一个。为了测试,我在原生界面放两个按钮来跳转到RN界面。1. 编写原生端界面xml文件<?...原创 2018-06-05 11:47:40 · 1800 阅读 · 2 评论 -
《ReactNative》之集成到现有Android原生应用
1.安装JavaScript依赖包在Android项目的根目录下新建package.json,并写入以下内容{ "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-n原创 2018-06-02 15:14:37 · 1115 阅读 · 2 评论 -
《ReactNative》之react-native-image-crop-picker保存图片到应用内部
在使用react-native-image-crop-picker(版本0.20.0)组件选择图片的时候,我希望将选取的图片保存到应用内部。但是在ios端,选取的图片被保存在临时目录中,大约3天左右会被自动删除。在android端,选取的图片没有往App内部保存,还是在原来的位置,组件只是返回了图片的存储位置。要解决这个问题,修改该组件ios和android端的源码即可。1.android端修改n...原创 2018-06-02 10:23:42 · 4087 阅读 · 1 评论 -
《ReactNative》之IOS原生集成ReactNative
1.安装JavaScript依赖包用终端进入到IOS原生项目根目录下,创建package.json文件(输入touch package.json)打开package.json文件,在文件中写入以下内容:{ "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { &qu原创 2018-06-18 18:10:44 · 336 阅读 · 0 评论 -
《ReactNative》之使用react-native-picker组件选择日期
最近在开发中需要做个选择日期的功能,发现react-native-picker这个组件不错,选择的内容可自定义,可选择日期、时间、城市等,功能强大,因此写了个Demo记录一下。github地址为:https://github.com/beefe/react-native-pickerstep 1:installnpm install react-native-picker --sav...原创 2018-12-15 21:54:03 · 9516 阅读 · 5 评论 -
《ReactNative》之 react-navigation 重复跳转问题解决
在使用 react-navigation 跳转界面时,如果快速点击某个按钮跳转界面,会出现 界面连续跳转 2 次的情况。这里提供一种简单的解决方法:新建 common.js 文件,在其中编写一个公共的导航跳转的函数,控制让界面在 一定时间范围(这里是1秒)内只跳转一次,比如在1秒内点击多次时,跳转事件只执行一次。common.js代码var lastNavTime = "";e...原创 2019-02-01 17:22:33 · 880 阅读 · 1 评论 -
《ReactNative》相对路径别名插件
ReactNative中引入自定义组件通常采用 '../../../xxx'的形式,使用babel-plugin-root-import 插件,可以达到如下效果使用前import List from '../../../components/list使用后import '~/components/list或者import '@/components/listnpm ...原创 2019-07-29 11:27:58 · 2825 阅读 · 4 评论 -
《ReactNative》之下拉选功能
1.效果移动开发中有个常见的功能,就是类似于下拉选的功能。2.代码原创 2018-05-25 11:01:47 · 6330 阅读 · 1 评论 -
《ReactNative》之数字密码解锁功能
1.效果 2.源码import React,{Component} from 'react';import { AppRegistry, Text, View, Modal, TouchableOpacity, TouchableHighlight, StyleSheet,} from 'react-native';v...原创 2018-05-01 11:50:28 · 734 阅读 · 2 评论 -
《ReactNative》之ScrollableTabView标签页切换
1.效果2.安装npm install react-native-scrollable-tab-view --save3.引入import ScrollableTabView from 'react-native-scrollable-tab-view';4.完整代码注页面顶部蓝色那块是自定义组件TitleComponent ,代码见另一篇《ReactNati原创 2017-04-14 14:40:49 · 938 阅读 · 0 评论 -
《ReactNative》之底部导航TabNavigator
1.安装npm install react-native-tab-navigator -save2.使用原创 2017-04-10 18:39:17 · 561 阅读 · 0 评论 -
《ReactNative》之ListView上拉下拉刷新
1.上拉下拉刷新的思路2.Android支持gif图片3.效果截图4.完整的代码原创 2017-05-11 09:46:02 · 1163 阅读 · 0 评论 -
《ReactNative》之SectionList的简单使用
1.效果截图2.完整代码原创 2017-05-23 14:57:48 · 1979 阅读 · 0 评论 -
《ReactNatve》之处理Android返回键
BackHandler处理Android返回键原创 2017-05-11 10:01:47 · 4880 阅读 · 0 评论 -
《ReactNative》之图片上传
ReactNative文件上传原创 2017-09-27 10:45:47 · 778 阅读 · 1 评论 -
《ReactNative》之百度地图打包时遇到的问题
1.No pending exception expected: java.lang.NoSuchMethodError: no static method "Lcom/baidu/vi/VMsg;.postMessage(IIIJ)V"'2.java.lang.NoSuchMethodError: no static method "Lvi/com/gdi/bgl/android/java/EnvDrawText;.drawText(Ljava/lang/String;II[IIIII)[I"原创 2017-11-07 17:39:30 · 1394 阅读 · 0 评论 -
《ReactNative》之Redux框架的使用
ActionReducerStore原创 2017-11-28 15:56:04 · 1027 阅读 · 0 评论 -
《ReactNative》常见问题
1.native module VectorIconsPackage tired to override modulename for module name VectorIconsPackage.If this was your intention,setcanOverrideExistingModule=true这个问题是 \android\app\src\main\java\com\p...原创 2018-03-06 15:09:12 · 670 阅读 · 1 评论 -
《ReactNative》mac ios开发环境搭建
1.安装XCode React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Lin...原创 2018-03-30 11:48:05 · 885 阅读 · 1 评论 -
《ReactNative》之sqlite(react-native-sqlite-storage)
react-native-sqlite-storage 版本 3.3.31.安装命令行进入到ReactNative项目根目录下执行npm install react-native-sqlite-storage --save 2.进行全局Gradle设置编辑 android/settings.gradle文件,添加以下内容include ':react-native-s...原创 2017-04-12 11:38:27 · 13568 阅读 · 6 评论