我是如何快速入门React Native的
我是如何快速入门React Native的
Powerise星
随着互联网的普及，技术的发展也是日新月异。作为一名程序员，如果只会一种编程语言显然不能够满足市场需求。因此，快速学习各种新技术、新语言应该成为程序员必备的能力。今天聊聊我是如何快速入门React Native的，希望借此帮助朋友们提升自己的学习能力。毕竟，我们都是有方法论的人，我会在大家的武器库里新增两件武器，在认知体系里升级两个认知。先说说什么是React Native。它于2015年诞生于Facebook，为开发者带来一套跨平台、动态更新的JavaScript框架。口号是：Learn once, write anywhere: Build mobile apps with React。这意味着，我们学会了React Native可以同时为iOS和Android两个平台开发业务逻辑几乎无差别的两个App。还是不懂这是什么？没关系。因为这并非重点，重点是，我们如何学习新知识。十步学习法我在去年阅读了一本书，叫做《软技能·代码之外的生存指南》，这是一本非常棒的书，看标题，似乎是写给程序员看的。然而，书里没有提到一行代码，它的受众并没有局限于互联网从业者，而是所有渴望进步的人。书中有一个非常厉害的学习方法论，叫做十步学习法，让我印象深刻。第一步：了解全局万事开头难，需要有全局观：React Native可以做什么？不可以做什么？需要什么开发环境？使用哪些IDE方便开发且交互友好？原来React Native官方提供了非常多的常用组件能够满足日常开发需求；但是如果需要调用平台的硬件资源时，比如启用摄像头，地图定位，陀螺仪等，并不太方便，离不开原生方法的调用；原来它是基于React的，依赖于Node开发环境，需要使用命令行工具方便快速调用，因此我们需要安装Node，需要安装官方提供的命令行工具；原来常用的编辑器都可以用来进行开发，那就挑选自己喜欢的咯，比如我喜欢用Atom和Sublime。……当我搞清楚了这些问题后，会对React Native有了一个全局的认识。第二步： 确定范围集中精力明确自己到底要学什么，比如学习React Native基础知识，可以了解创建iOS和Android App需要哪些知识和步骤。第三步： 定义目标定义可以量化的目标。这次我的入门目标是完成公司项目中一个模块的React Native实现。第四步： 寻找资源大量收集各种资料。在网易云课堂、慕课网、简书、极客学院等网站搜寻各种学习资料。具体细节使用Google搜索相关博文。第五步： 创建学习计划这一步可以理解为自己写书时候的大纲。比如我给自己创建的学习计划是用50个小时学习React基础，用20个小时学习与Native的混编，用15个小时学习热更新，最后用20个小时来实现功能。每天抽取约3小时投入其中。第六步： 筛选资源知道了学什么以及按照什么顺序学，那么就要决定用哪些资源，筛选出最有价值的资源。我推荐的资源有：官方文档慕课网：ReactNative基础与入门慕课网：React Native开发双平台GitHub AppCrazyCodeBoy博客我的筛选理由是：官方文档权威、文档全面，支持修改演示代码预览执行结果英文不太好的可以学习慕课网ReactNative基础与入门课程，内容简单易懂，实操性强React Native开发双平台GitHub App课程是实战项目，可以让我们比较深入的学习使用React native第七步： 开始学习，浅尝辄止快速学习基础知识，立刻开始实际操作。如果我们一直学习却不去实践不会有很快的进步的，当我们有了开始练习的开发环境的时候，立刻去学习。遇到不不懂的问题，不要着急，先跳过，坚持看完。第八步： 动手操作，边玩边学这一步没有任何规则，可以做任何你想做的事情。比如这里我会写各种好玩的组件，每完成一个组件就会有成就感，就会感觉有趣。第九步： 全面掌握，学以致用这一步你要用好奇心来驱动学习。当我们掌握到一定的程度，就不在满足于写一个小功能了，而是想做出有用的产品。不是么？第十步： 乐为人师，融汇贯通“你告诉我的，我都忘了。你教会我的，我都记得。让我乐在其中，我就一定能学会。” 这一点一会儿会再聊到。MAKE至此，我使用的学习方法论介绍完了吗？其实并没有，我的核心学习方法论是MAKE。这是个关于“速成”方法论。然而，我理解的速成并非“迅速成功”，而是“快速入门”。速成绝无可能，但是快速入门不仅绝对有可能，而且还绝对必要。MAKE: Minimal Actionable Knowledge and Experience意思是：最少必要知识想要获得某项技能的时候，一定要想办法在最快的时间里，摸索清楚最少必要知识（MAKE）都有哪些？然后迅速地掌握它们，在那一瞬间，任何人都完成了“快速入门”。那么，学习React Native这件事的MAKE集是什么呢？我总结出了三点：ReactComponents会查文档React是基础知识，我们需要掌握其中的每个概念。当我们了解了React基础之后，就可以学习如何写Components了，学会写各种Component，就学会写App页面了，因为这些页面都是由各个Component组成的。一旦我们掌握了前两个MAKE，剩下要做的就是多练习了。练习过程中遇到问题最重要的是要会查文档，比如查官方Component的用法，官方接口如何使用，遇到问题会使用Google搜索等。这个MAKE主要是为了提升我们解决问题的能力。付费就是捡便宜学习方法论说完了，但是在执行的过程中可能会有一些疑问。我搜集到了很多学习资源，该如何选择呢？事实上，很多课程不成体系。事实上，付费的课程是比较好的。事实上，付费就是捡便宜！因此，我花了500元左右买的慕课网上的付费课程。我的付费观念能够转变成这样是因为我吃了很多免费的亏。吃的那些亏让我明白，牛人的认知差异真的会比我们大的多，他们的认知会让他们的行动很积极且正确。想要学习新的知识，就应该找那些比自己牛的人，跟着他们学肯定是捡便宜。教是最好的学这是一个绝招。很多时候，我们自认为学会了某一个技能，其实不一定学会了！不信，你自己尝试将他们写出来，很有可能你的脑子里一片空白，什么都写不出。如果你能将自己所学讲给别人听，说明确实是理解了，至少说明逻辑是清晰的。我的做法是，当我觉得入门了React Native的时候，在公司部门内部进行一次分享。这么做，确实明智，加深了我对这个技能的理解。十步学习法和MAKE方法论是两个非常强大的武器，配合两个妙招，几乎可以搞定所有技能的学习。值得你一试！
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
Powerise星
百家号 最近更新：
简介: 天文学和地理学
作者最新文章react-native 实现百度地图(ios&Android) - 简书
react-native 实现百度地图(ios&Android)
最近公司需要在app上使用地图组件加载地图，从网上找了很多第三方都不是很理想，总会有ios和Android不兼容的问题，后来在GitHub上看到了react-native-baidu-map，觉得可以一试，虽然GitHub上有配置说明，但在过程中遇到许多坑，写篇文章记录一下，免得忘记。
先说明一下，我使用的react-native开发工具是webStorm，同时我们需要你的电脑上装有Android studio和Xcode，这样方便我们配置后面的一些东西。android我使用的是真机来运行，而ios直接使用模拟器运行，至于mac上怎么使用Android真机运行程序，我想也不用赘述了。好了，下面正式开始我们的项目。
1.创建项目
首先打开终端，在相应的目录下输入命令创建新项目，
react-native init BaiDuMapDemo
项目创建完成，进入项目根目录下输入
npm install react-native-baidu-map --save
打开网址：下载demo，如果你有git，你也可以直接使用命令下载demo：
git clone /lovebing/react-native-baidu-map.git
demo下载完成，将demo中的BaiduMapDemo.js文件直接拷贝到新建项目的根目录下，使用webStorm打开新建的项目，修改index.android.js和index.ios.js文件。
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
TouchableHighlight
} from 'react-native';
import BaiduMapDemo from './BaiduMapDemo'
export default class BaiDuMapDemo extends Component {
render() {
&BaiduMapDemo/&
AppRegistry.registerComponent('BaiDuMapDemo', () =& BaiDuMapDemo);
2.Android运行
(1)在settings.gradle中添加以下内容
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')
(2)在build.gradle中添加：
compile project(':react-native-baidu-map')
(3) 修改MainApplication.Java 文件
添加：new BaiduMapPackage(getApplicationContext())例如：
protected List&ReactPackage& getPackages() {
return Arrays.&ReactPackage&asList(
new MainReactPackage(),
new BaiduMapPackage(getApplicationContext())
(4) 修改AndroidMainifest.xml 文件
此文件有2处需要配置：1）配置各种权限2）添加com.baidu.lbsapi.API_KEY完整权限配置：
&!-- 这个权限用于进行网络定位--&
&uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"&&/uses-permission&
&!-- 这个权限用于访问GPS定位--&
&uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"&&/uses-permission&
&!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位--&
&uses-permission android:name="android.permission.ACCESS_WIFI_STATE"&&/uses-permission&
&uses-permission android:name="android.permission.INTERNET" /&
&uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/&
&uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/&
&uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /&
&uses-permission android:name="android.permission.WAKE_LOCK"/&
&uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /&
&uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /&
&uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/&
&uses-permission android:name="android.permission.WRITE_SETTINGS" /&
android:minSdkVersion="16"
android:targetSdkVersion="22" /&
&application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme"&
&meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="3Hk70Z0e6N3hDRQZwuLFAlgLqB5B4ak7"/&
注意：API_key需要自己去百度地图API申请！
使用命令运行项目：
npm install
react-native run-android
按道理说这样配置完成项目就已经能跑了，但是手机却出错了
QQ649@2x.png
百度了一下找到了解决方案：然后运行成功啦~上效果图~
IMG_0914.JPG
(1)打开文件
使用Xcode打开新建项目中ios目录中的BaiDuMapDemo.xcodeproj文件
1）Project navigator-&Libraries-&Add Files to 选择BaiDuMapDemo/node_modules/react-native-baidu-map/ios/RCTBaiduMap.xcodeproj
2）Project navigator-&Build Phases-&Link Binary With Libraries 加入 libRCTBaiduMap.a
3）添加BaiDuMapDemo/node_modules/react-native-baidu-map/ios/lib，并在Project navigator-&Build Settings-&Search Paths， Framework search paths 添加路径xxx/BaiDuMapDemo/node_modules/react-native-baidu-map/ios/lib，Header search paths 添加 xxx/BaiDuMapDemo/node_modules/react-native-baidu-map/ios/RCTBaiduMap
4）添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk(上一步拷贝lib时这些已经自动添加，可省略)， CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework、Security.framework、libsqlite3.0.tbd（xcode7以前为 libsqlite3.0.dylib）、CoreTelephony.framework 、libstdc++.6.0.9.tbd（xcode7以前为libstdc++.6.0.9.dylib）
5）添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle
6）AppDelegate.m init 初始化
#import "RCTBaiduMapViewManager.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
[RCTBaiduMapViewManager initSDK:@"api key"];
注意：api key也要替换成自己申请的key
7）编译运行上效果图~
QQ320@2x.png
注意：在配置iOS时会有很多坑，我配置时出现了duplicate symbols for architecture x86_64错误，百度后发现是重复导入RCTBaiduMap文件夹导致的，将文件夹删除即可解决，将解决的网址贴出来：
好了，自此Android和ios平台的百度地图全部加载出来了！希望大家也能顺利运行出来~百度地图的React-Native Android版本
来源：open开发经验库
百度地图的React-Native版本 
example 
'use strict';
import React, {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import BaiduMap from 'baidumapkit';
class BaiduMapExample ponent {
render() {
return (
&View style={styles.container}&
&Text style={styles.welcome}&
React Native Baidu MapView!
&/Text&
&BaiduMap
style={{flex:1}}
marker={[
[39.6.440244],
[39.6.490244],
[39.6.490244],
[39.6.490244]]}
mode={2} //1. 普通 2.卫星
trafficEnabled={true} //城市实时交通图
heatMapEnabled={true} //城市实时交通热力图
&/View&
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
welcome: {
fontSize: 20,
color: 'red',
textAlign: 'center',
margin: 10,
AppRegistry.registerComponent('BaiduMapExample', () =& BaiduMapExample);效果图 
step 1 install 
$ npm install baidumapkit --save
Step 2 - Update Gradle Settings 
// file: android/settings.gradle
include ':baidumapkit',
':app'
project(':baidumapkit').projectDir = new File(rootProject.projectDir, '../node_modules/baidumapkit')Step 3 - Update app Gradle Build 
// file: android/app/build.gradle
dependencies {
compile project(':baidukitmap')
}Step 4 - Register React Package 
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceM
private ReactRootView mReactRootV
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//初始化百度地图
SDKInitializer.initialize(getApplicationContext());
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new BaiduMapReactPackage(this)) // &-- Register package here
.setUseDeveloperSupport(true)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProj", null);
setContentView(mReactRootView);
}update AndroidManifest.xml，填写申请的app的key 
&manifest xmlns:android="/apk/res/android"
package="百度注册的app的name"&
&!--地图要求的权限--&
&uses-permission android:name="android.permission.INTERNET" /&
&uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/&
&uses-permission android:name="android.permission.INTERNET"/&
&uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /&
&uses-permission android:name="android.permission.WAKE_LOCK"/&
&uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /&
&uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /&
&uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/&
&uses-permission android:name="android.permission.WRITE_SETTINGS" /&
&application
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme"&
&meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="App的key" /&
&/application&
&/manifest&项目主页：
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动React Native优秀的第三方插件（Android & iOS） - 风雨无阻，执着追求!!! - CSDN博客
React Native优秀的第三方插件（Android & iOS）
1.&文件上传
4.图片选择器（可多选）
5.&滚轮选择器
6.下拉刷新listview
7.&可滚动标签
9.&图片轮播
10.&CheckBox
12.&各种漂亮的小组件
13.&&base组件库
14.&不错的按钮
&炫酷效果的
17.&百度地图
(集成百度地图详细教程:)
18.&加载动画
20.&图表(功能炒鸡强大)
21.&下拉放大
22.&可滑动的日历组件
23.&提示消息的Bar
24.&点击弹出视图
26.&双平台兼容的ActionSheet
键盘遮挡问题
28.图片加载进度条
30.&毛玻璃效果
我的热门文章关注51Testing
如何覆盖React Native功能测试
发表于： 10:51 &作者：mengyidan1988 & 来源：51Testing软件测试网采编
推荐标签：
　　使用 Macaca 做前端组件一篇 已经介绍了如何在运行时测试。本篇介绍如何对 Native 的渲染进行测试，覆盖 React Native 的等同于覆盖 Native 的测试，需要 ,
的系统运行时环境。此类端对端测试使用Macaca的Native配置即可。　　示例　　本示例以 React 组件 autoresponsive-react 为例说明，对 UI 功能进行一些操作，配合截图等方式辅助校验。describe('base', function() {this.timeout(5 * 60 * 1000);var driver = wd.initPromiseChain();driver.configureHttp({timeout: 300 * 60 * 1000});before(function() {return driver.initDriver();});after(function() {return driver.sleep(1000).quit();});it('#1 login picture should be the same.', function() {return driver.sleep(40 * 1000).waitForElementByName('autoresponsive').takeScreenshot().then(imgData =& {var newImg = new Buffer(imgData, 'base64');var screenshotFolder = path.resolve(__dirname, '../screenshot');var oldImgPath = path.join(screenshotFolder, process.env.platform === 'android' ? 'android.png' : 'ios.png');var diffImgPath = path.join(screenshotFolder, process.env.platform === 'android' ? 'android-diff.png' : 'ios-diff.png');return diffImage(oldImgPath, newImg, 0.3, diffImgPath);}).then(result =& {result.should.be.true();}).catch(e =& {console.log(e);});});});　　如何配置 Native-CI　　Native-CI 非常重要，同样，Macaca配置React Native UI测试环境也非常方便，只是需要注意测试之前要通过Build流程。　　Comparison　　Image diff 是个很实用的辅助测试手段，对UI进行截图与预期图片对比，可以得出功能测试结果是否符合预期：　　如下图就是个例子：
搜索风云榜
51Testing官方微信
51Testing官方微博
测试知识全知道}