前面大概介绍了react-native的运行helloword级别的入门,所以之后简单的东西就不写了,毕竟官网上都能够找到. reactnative官网:https://facebook.github.io/react-native/docs/getting-started.html reactnative中文网:http://reactnative.cn/docs/0.25/getting-started.html 之后我会把工作中遇到的一些react-native的深坑分享一下. 正题===

React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是:weixin:// 二,URL Scheme介绍 2.1,URL Scheme是什么? URL Scheme是一种页面内跳转协议,是一种非常好的实现机制,通过定义自己的scheme协议,可以非常方便跳转app中的各个页面:通过scheme协议,服务器可以定制化告诉App跳转那个页面,可以通过通知栏

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 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import React from 'react'; import PropTypes from 'prop-types'; import { View, Text, TouchableOpacity, ViewPropTypes, StyleSheet } from 'react-native'; const defau

年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN.在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置.页面如下: 就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置,核心代码如下: renderSectionHeaderContent() { return ( <SectionHeader ref={(sectionHeader) => { this.sectionHeader = sectionHeader; }} title={this.state.se

使用React Native,可以使用NetInfo API获取手机当前的各个网络状态. componentWillMount() { NetInfo.fetch().done((status)=> { console.log('Status:'+status); }); } 获取网络状态是异步的,上面使用了Promise机制. Android端网络状态 请求网络信息需要先在应用的AndroidManifest.xml文件中添加如下权限字段,申请相关权限: <uses-permission a

getMoviesFromApiAsync() { return fetch('http://facebook.github.io/react-native/movies.json') .then((response) => response.json()) .then((responseJson) => { return responseJson.movies; }) .catch((error) => { console.error(error); }); } 你也可以在React

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, TextInput, Dimensions } from 'react-native'; var ScreenWidth = (第一大门神) Dimensions.get('window').width; export default class Root extends Component { //

import React,{Component} from 'react'import { View, Text, Image, StyleSheet, TouchableHighlight, TouchableOpacity, ScrollView, findNodeHandle, UIManager,} from 'react-native' export default class GoodsSelectAssembly extends Component {getHeight() {  

RN页面中定位或滚动操作时,需要获取元素的大小和位置信息,有几种常用的方法 获取设备屏幕的宽高 import {Dimensions} from 'react-native'; var {height, width} = Dimensions.get('window'); 获取元素的大小和位置信息1. onLayout事件属性 <View onLayout={this._onLayout}><View> _onLayout = (e) => { let {x,y,width,

var Dimensions = require('Dimensions'); var {width,height} = Dimensions.get("window");//第一种写法 var width1 = Dimensions.get('window').width//第二种写法 export default class Demo extends Component { render() { return ( <View style={styles.container}&

1.从电脑的根目录进入.android文件 2.进入.android文件后输入 keytool -v -list -keystore debug.keystore 3.回车输入密码,(可以直接回车不用输密码) 4.这样就可以了

React Native之获取通讯录信息并实现类通讯录列表(ios android) 一,需求分析 1,获取通讯录信息,筛选出通讯录里有多少好友在使用某个应用. 2,获取通讯录信息,实现类通讯录,可拨打电话 发短信等. 二,技术介绍与配置 2.1 技术介绍 1,react-native-contacts地址:https://www.npmjs.com/package/react-native-contacts 2,下载安装:npm install react-native-contacts --

1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是否请求成功与数据的处理,我们还需处理成功与失败的回调 function getMoviesFromApiAsync() { return fetch('https://facebook.github.io/react-native/movies.json') .then((response) =>

React Native端 使用react-native-image-picker 做出选择图片的操作,选择完成后,直接将图片Post至服务器,保存在服务器的某个地方(保存图片的路径需要公开显示),并返回图片的URL地址,Android应用中,只保存图片的URL地址. component中代码 _chooseImage() { ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', respo

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 {

多说不如多撸: /** * Created by shaotingzhou on 2017/2/23. *//** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Keyboard, TextInput, Dime

前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. PS:任何新技术的尝鲜都一定要控制在自己能控制的范围内,失败了会有可替换方案,不要引起不可逆的问题,这样会给团队造成灾难性的后果. 事实上,RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快

[转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用--就在今天,Beta 版的仓库释出了! 基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了,那 React Native 有什么牛的? React Native 真的很牛,让大家兴奋异常的主要原因有两点: 可以基于 React Na

上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望对在web开发有一定基础,想涉及app开发的同学有帮助,共同进步. 一.环境安装 首先是开发环境安装,我是在win7/8 64位环境下安装的安卓环境.模拟器用的是android studio自带模拟器(android emulator),安卓API 24(7.0),因为我没有mac -.-.文中组件

在 App 开发中我们经常需要在用户登录模块接入 SNS 登录组件,这样会大大提高用户的注册体验.特别当一个不是刚性需求 App 推广的时候,这样会很大的降低用户体验的成本,没有人愿意忍受输入邮箱.手机号码去注册一个账号的流程. 本文主要分享了在 React Native 中接入微博.微信.QQ 登录的流程,以及此前登录组件中修复的一个已知 bug 的修复. 我的源博客地址:http://blog.parryqiu.com/2016/01/27/react_native_sns_weibo_we