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…

转自:http://blog.csdn.net/quanqinyang/article/details/52215652 在做React Native开发时,少不了的需要对React Native程序进行调试.调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率.本文将向大家分享React Native程序调试的一些技巧和心得. Developer Menu Developer Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React…

[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开发时,少不了的需要对React Native程序进行调试.调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率.本文将向大家分享React Native程序调试的一些技巧和心得. Developer Menu Developer Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React Native应用. 提示:生产环境release (production) 下Developer Menu是不可用的. 如…

在做React Native开发时,少不了的需要对React Native程序进行调试.调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率.本文将向大家分享React Native程序调试的一些技巧和心得. Developer Menu Developer Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React Native应用. 提示:生产环境release (production) 下Developer Menu是不可用的. 如…

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 程序的时候,经常会用到Js的打印语句Console.log等 但我们一脸蒙逼的时候,启动的时候完全看不到打印的内容在哪儿呢??? 原来还要在命令行下输入一个语句才能看到! 如下: 1)Android下 #react-native log-android 2)Ios下 #react-native log-ios 另外,附上在中断命令下打开Dev菜单的方法,避免再次摇晃手机才能弹出 #adb shell input keyevent 82 本博客地址: wukon…

在用模拟器或者真机调试完App后,需要将App打包成Apk发布文件. 下面简单记录下打包步骤: 第一:生成签名密钥 这一步的操作主要是生成需要的签名密钥,供android调用,生成的文件待用 在项目根目录运行以下命令,输入的密码是比较简单的1234567890 keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize -validity 第二:设置gradle 第一步…

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: [ { ", &…

React Native 让 Flatlist  支持  选中多个值,并获取所选择的值 实现效果如下: 实现代码: import React, {Component} from 'react'; import { Image, Text, View, TouchableOpacity, FlatList, StyleSheet, Button } from 'react-native'; export default class TestListCheck extends Component {…

React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita…

React Native 权限申请 react-native-permissions 一.安装 npm i -S react-native-permissions link: react-native link react-native-permissions 二.使用…

React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {Component} from "react"; import { StyleSheet, ListView, Image, View, Text, TouchableOpacity } from "react-native"; const ds = new ListVi…

React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; import {StyleSheet, Animated} from "react-native"; /** * 滑动吸顶效果组件 * @export * @class StickyHeader */ export default class StickyHeader extends Rea…