今天学习一下react-native-svg,一如既往,在安装该库的时候,就有一大堆坑等你填. 首先,我新建一个rn项目,按照官方说明先导入库 npm install react-native-svg --save 再链接库文件 rnpm link react-native-svg 然后运行,成功报错: 然后我换个姿势入水,我重新新建一个项目,先打开运行起来,再导入三方库和链接link.然后写一些三方库代码,然后刷新界面. 这次报:No component found for view with

[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {Image, StyleSheet, Text, View, ViewPagerAndroid, Dimensions} from 'react-native'; const {width, height} = Dimensions.get("window"); //图片地址 const P

[RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native": "0.59.5", 1.图片问题 1)本地图片放二级目录下不显示 原因:二级目录下图片无法访问 解决方法:直接放在和代码文件同级目录 2)网络图片无法加载问题 原因: a.高版本下http链接无法识别   b.图片未设置 width , height 解决方法 a.要么设置支

[RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty string','Invalid props.style key']; console.disableYellowBox = true // 关闭全部黄色警告 将这两句话加在ind

上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. 不同点在于 /src/App.js 下 主要使用 react-navigation 下的 createMaterialTopTabNavigator 所以也需要先安装 react-navigation 1)依赖版本如下: "react-navigation": "^3.9.1&

[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, ScrollView, StyleSheet, Text, View,} from 'react-native'; var banner = [ "http://a.hiphotos.baidu.com/image/pic/item/ac4bd11373f08202e2518d6d45fbfbedaa64

[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1)先安装react-native版本,以0.50.0为例 npm install --save react-native@0.50.0 2)以指定版本,创建项目 react-native init demo --version 0.50.0 3.在项目中切换 react-native 版本 1)先修改

[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from 'react-native'; import App from './src/js/App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); 二.App.

React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugin-import --save-dev 二.配置 编辑根目录下 .babelrc 增加 红色区域显示代码 { "presets": [ "module:metro-react-native-babel-preset" ], "plugins": [

React Native 获取地理位置 实现原理: 1.用  navigator.geolocation.getCurrentPosition 获取到坐标信息 2.调用 高德地图 接口,解析位置数据 本文所用RN 版本为 0.57.8 实现代码如下: import React, {Component} from 'react'; import {StyleSheet, Text, View} from 'react-native'; export default class TestGeo ex

React Native 图片保存到相册(支持 Android 和 ios) 原理: IOS用 RN自带的 CameraRoll, Android 使用 不成功,需要 react-native-fs  和  CameraRoll 配合使用 已经封装成类: ImageUtil.js 'use strict'; import React from 'react'; import {CameraRoll, Platform} from 'react-native'; import ToastUtil

React Native 调试技巧 一. 安卓模拟器调出Dev Setting 命令 adb shell input keyevent 二.图片不出来时,先运行此命令,再重新 run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest androi

React Native 错误 Module does not exist in the module map 代码如下: import Login from 'login' import Index from 'index' 解决方法: 导入自己写的js一定不要忘了写‘./’,否则会以为引入的是modules... 改为: import Login from './login' import Index from './index' 本博客地址: wukong1688 本文原文地址:https

React Native 使用 realm  数据库 realm 是一款专为移动 ​ 端开发的高性能数据库,其宣称自己是最快的 react-native 数据库. realm 整体的优点有这么四点: 1.简单易用, 2.跨平台, 3.快速性能优越, 4.提供高级功能.realm 核心数据引擎用 C++ 打造,并不是建立在 SQLite 之上的 ORM.因此性能就是比普通的 ORM 要快很多,甚至比单独无封装的 SQLite 还要快.同时因为是 ORM,本身在设计时也针对移动设备(iOS.Andr

这是我在开发 React Native 本地 Android Studio 3.1.4 时 构建 release 版本失败,而开发环境正常 之前用 Android Studio 2.*  未出现此问题! 版本信息: "react": "16.6.3", "react-native": "0.57.8", 解决方法: 编辑 android/gradle.build //android/gradle.build // Top-le

React Native FlatList 选中后 状态没有立即发生改变,而在下一次生效的问题 解决关键: 给 FlatList 添加 extraData={this.state} 非常关键,如果不设置点击就不会马上改变状态,而需要拖动列表或者下次渲染才会改变 解决方法参考: https://www.jianshu.com/p/e9144208f18f 本博客地址: wukong1688 本文原文地址:https://www.cnblogs.com/wukong1688/p/11205371.h

React Native 使用 Redux 比较详细和深刻的教程 React Native 使用 Redux https://www.jianshu.com/p/06fc18cef56a http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

React Native ScrollView去掉自带的间隔 使用ScrollView时,自带了一个类似marginTop的效果,将其去掉 <ScrollView automaticallyAdjustContentInsets={false} > 本博客地址: wukong1688 本文原文地址:https://www.cnblogs.com/wukong1688/p/11173825.html 转载请著名出处!谢谢~~

React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVerticalScrollIndicator={false} style={styles.container} stickyHeaderIndices={[]} > stickyHeaderIndices  = {[1]} 表示 ScrollView 的 第二个子元素 上滑时 吸顶 本博客地址: wukong

React Native 下拉放大动画 经测试,无法运行 https://www.jianshu.com/p/1c960ad75020

React Native 实现 多选标签 效果如下: 实现代码: import React, {Component} from 'react'; import {Button, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; export default class TestMarkCheck extends Component { static defaultProps = { multiList: [ { ", &