nativereactandroid
A. React Native开发android和ios客户端有什么优势和劣势
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 javaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。 React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。 其好处显而易见：减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。 下面，我们可以尝试用React Native创建一个 iOS APP. 在我们开始之前，我建议：你可以在 Github 里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的 APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native 替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建 UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。 回答不容易,希望能帮到您,满意请帮忙采纳一下，谢谢
B. react native android dev setting怎么配置
一，设备与环境
1，一台 mac
2，安装软件包管理器 Homebrew(中文)
终端里输入/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"进行安装。
3，安装 wget 或者 curl
wget，终端里输入brew install wget进行安装。
curl，终端里输入brew install curl进行安装。
4，安装 nvm (node版本管理器)
如果安装了 wget，终端输入wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash进行安装 nvm。
如果安装了 curl，终端输入curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bashÂ进行安装 nvm。
5，Android SDK
这个不用多说了，相信大家都会的。顺便把 Android SDK 配置到环境变量。
如果你没有 Android SDK，也可以通过终端输入brew install android-sdk。
二，安装和初始react-native demo
终端输入npm install -g react-native-cli安装 react-native。
如果显示EACCES: permission denied，用超级权限再次执行一下上面的指令。反正我是没遇到。
进入到你要创建 demo 的目录，终端输入cd 你得文件路径.
终端输入react-native init AwesomeProject，初始 AwesomeProject 。
终端输入cd AwesomeProject。
终端输入react-native run-android可以直接运行 node 服务并编译运行 Android 项目，直至安装到手机。
C. react native android端很卡是怎么回事
在使用React Native的时候，经常会看到这么一段代码 var React = require('react-native');1 那么require这个语句的作用到底是什么呢，下面的流程提取自require() 源码解读 当遇到 require(X) 时，按下面的顺序处理。 （1）如果 X 是内置模块（比如 require(‘http’）) a. 返回该模块。 b. 不再继续执行。 （2）如果 X 以 “./” 或者 “/” 或者 “../” 开头 a. 根据 X 所在的父模块，确定 X 的绝对路径。 b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。 X X.js X.json X.node c. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。 X/package.json（main字段） X/index.js X/index.json X/index.node （3）如果 X 不带路径 a. 根据 X 所在的父模块，确定 X 可能的安装目录。 b. 依次在每个目录中，将 X 当成文件名或目录名加载。 （4） 抛出 “not found” 以上就是require语句的整个执行过程。那么require(‘react-native’);请求的到底是什么呢，其实就是node_moles\react-native\Libraries\react-native\react-native.js这个文件，该文件中导出了一些常用的组件，
D. react-native 怎么运行在android
楼主：不太清楚你想表达什么意思，但是你想使用RN开发Android应用，首先你要先搭建好开发环境，可以参考Facebook的官方文档：https://facebook.github.io/react-native/docs/getting-started.html
搭建好开发环境后，运行下面几个命令就可以得到一个RN项目：
react-nativeinitAwesomeProject
cdAwesomeProject
react-nativestart
react-nativerun-android
你可以选择在手机上或者模拟器上运行项目，使用adb devices可以查看连接到你电脑的手机或者模拟器。
当然，如果想学习RN开发的话，需要了解的知识还是很多的，但是学任何一门技术都是有一定的困难，网上有很多关于RN的入门教程，但最重要的还是官方文档，近期我在做一个RN的实战项目教程，欢迎Q我：879942736了解学习。
E. react native怎么开发android
安装Git
在Mac上，如果您已安装XCode，则已安装Git，否则运行以下命令：
brew install git
在Linux上，通过软件包管理器安装Git。
在Windows上，下载并安装Git for Windows。在安装过程中，选择“从Windows命令提示符运行Git”，这将添加Git到您的PATH环境变量。
安装Android SDK（除非您已经拥有它）
安装最新的JDK
安装Android SDK：
在Mac上：brew install android-sdk
在Linux和Windows上：从Android网站下载
定义ANDROID_HOME环境变量
重要信息：确保ANDROID_HOME环境变量指向现有的Android SDK：
在Mac上，将其添加到〜/ .bashrc，〜/ .bash_profile或您的shell使用的任何内容：
＃如果你通过Homebrew安装了SDK，否则〜/ Library / Android / sdk
export ANDROID_HOME = / usr / local / opt / android-sdk
在Linux上，将其添加到〜/ .bashrc，〜/ .bash_profile或您的shell使用的任何内容：
export ANDROID_HOME = <path_where_you_unpacked_android_sdk>
在Windows上，转到控制面板 - >系统和安全 - >系统 - >更改设置 - >高级 - >环境变量 - >新建
注意：您需要重新启动命令提示符（Windows）/终端仿真器（Mac OS X，Linux）以应用新的环境变量。
使用gradle守护进程
React Native Android使用gradle作为构建系统。我们建议启用gradle守护程序功能，这可能会导致Java代码更改的增量构建时间增加50％。了解如何为您的平台启用它。
配置您的SDK
打开Android SDK Manager（在Mac上启动一个新的shell并运行android）;在出现的窗口中确保您检查：
Android SDK Build-tools版本23.0.1
Android 6.0（API 23）
支持库的本地Maven存储库（这在旧版本中称为Android支持存储库）
点击“安装软件包”
SDK管理器窗口SDK管理器窗口
安装Genymotion
Genymotion比谷歌模拟器容易设置。但是，它是免费的个人使用。如果你想使用股票Google模拟器，请参阅下文。
下载并安装Genymotion。
打开Genymotion。它可能会要求您安装VirtualBox，除非您已经拥有它。
创建一个新的模拟器并启动它。
要显示开发人员菜单，请按⌘+ M
替代方法：创建库存Google模拟器
启动一个新的shell并运行android;在出现的窗口中确保您检查：
Intel x86 Atom系统映像（适用于Android 5.1.1 - API 22）
英特尔x86模拟器加速器（HAXM安装程序）
单击“安装软件包”。
配置硬件加速（HAXM），否则仿真器会变慢（或可能根本不运行）。
在mac上，这通常需要打开：/usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_<version>.dmg并在其中安装软件包。
创建Android虚拟设备（AVD）：
运行android avd并单击创建...创建AVD对话框
选择新的AVD后，单击开始...
要显示开发者菜单，请按F2（或安装Frappé）
Windows Hyper-V替代
Android的Visual Studio模拟器是一个免费的Android模拟器，通过Hyper-V硬件加速。它不需要你安装Visual Studio。
要使用它与react-native你只需要添加一个键和值到您的注册表：
打开运行命令（Windows + R）
输入regedit.exe
在注册表编辑器中导航到HKEY_LOCAL_MACHINE \ SOFTWARE \ Wow6432Node \ Android SDK工具
右键单击Android SDK工具，然后选择新建>字符串值
将名称设置为路径
双击新的路径键，并将值设置为C：\ Program Files \ Android \ sdk。路径值可能在您的计算机上不同。
您还需要使用此模拟器运行命令adb reverse tcp：8081 tcp：8081。
然后重新启动模拟器，当它运行你可以只是做一样反应原生run-android像往常一样。
在Android Studio中编辑应用程式的Java程式码
您可以使用任何编辑器编辑JavaScript。如果您想使用Android Studio来处理本机代码，请从Android Studio的“欢迎”屏幕选择“导入项目”并选择您的应用程序的Android文件夹。
故障排除
万一你遇到
任务'：app：installDebug'的执行失败。
com.android.builder.testing.api.DeviceException：com.android.ddmlib.
尝试将您的Gradle版本降级到1.2.3在<project-name> /android/build.gradle（https://github.com/facebook/react-native/issues/2720）
F. 如何愉快地调试一个 React Native for Android APP
首先确保你的电脑和手机设备在同一个Wi-Fi环境下。其次你需要开启USB调试才能在你的设备上安装你的APP。一定要确定你已经打开设备的USB调试开关!确保你的设备已经被成功连接，可以输入adbdevices核实:在右边那列看到device说明你的设备已经被正确连接了。注意，你只应当连接仅仅一个设备。因为如果你连接了多个设备（包含模拟器在内），你后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保adbdevices的输出只有一个是连接状态。现在我们可以运行react-nativerun-android来在设备上安装并启动我们的应用了这句命令执行后，实际上就是在本地起一个nodeserver，并且将你的androidproject编译打包，再上传到你的手机上。然后当js文件有改动或debug模式下手动选择reloadjs时候会自动更新bundle文件，达到改动js文件后即时显示的调试效果。这“红屏”又是什么鬼？别着急，是正常的，我们需要连接上开发服务器，下面的步骤会解决这个问题。摇晃手机，或者运行adbshellinputkeyevent82，可以调出开发者菜单。点击进入DevSettings点击Debugserverhostfordevice输入你电脑的IP地址和端口号（譬如我的是192.168.3.15:8081）注意：如果你的设备是android5.0以上版本(API21+)，就不用折腾这步了而是：运行adbreversetcp:8081tcp:8081（建立一个从设备向电脑转发的端口，前提是设备和电脑通过USB相连）不需要配置，你就可以使用ReloadJS和其它的开发选项了Chrome开发者工具在Chrome上调试js代码，需要在开发菜单中选择DebugJS，这会打开一个新的debugger-uitab页。在Chrome中，按下⌘+option+i或者选择视图(View)->开发者(Developer)->开发工具(DeveloperTools)来打开开发工具控制台。打开有异常时暂停（PauseOnCaughtExceptions）选项，能够获得更好的开发体验。Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。要查看APP日志？在终端下运行adblogcat*:SReactNative:VReactNativeJS:V可以看到你的应用的日志。实时刷新这个选项可以在你的js代码变更了之后，自动触发所连设备或者模拟器自动刷新。开启方法：先打开开发菜单，选择DevSettings，然后选择AutoreloadonJSchange选项。到此才能完整的调试AndroidRN,繁琐到累绝不爱。。等等，能否想法简化一下过程？既然我们的RN项目里包含了完整的android工程，何不把android工程导入到androidstudio去运行？不但可以同时查看js的日志和native的日志，而且开发android的同学最熟悉AS，利用AS的快捷键和各类插件提升调试效率。haveatry,答案是肯定的！执行react-nativestart也可以起一个nodeserver，只是它不帮你安装APP到device。以上就是我踩坑后整理的方法，按这套组合拳就可以愉快地调试了。水平有限，抛砖引玉，如果你有更好的方法！欢迎拍砖！此处插播一个广告：拍砖请拍到我们的杏树林开放空间（246078103），期待感兴趣的同学加入。之后要解决的一些issue1，关于设备MinSdkVerisonRN只支持Android4.1.2（API16）以上设备，4.0根据网络数据大概占比0.7比例，随着大部分app已经不支持4.0以下设备了，这块倒还可以接受,目前我们的病历夹是3.0(API-11),口袋是4.0(API-14)2，我们的androidRN现在只能通过DebugJS才能渲染出界面，而不能正常的用ReloadJS3，在界面跳转时卡的令人发指
G. React-Native-Android怎么封装原生组件
参考如下内容：首先在Android中嵌入ReactNative：每一个AndroidStudioproject下包含多个mole，所以，从命令行进入到mole根目录，运行：[plain]viewplain$npminit$npminstall--savereact-native$curl-o.flowconfig/facebook/react-native/master/.flowconfig上述命令会创建一些react-native依赖的一些模块，在package.json文件的scripts属性中添加：[javascript]viewplain"start":"nodenode_moles/react-native/local-cli/cli.jsstart"注：如果scripts中存在其他键值对，则以逗号为分隔符。在mole的根目录创建index.android.js文件，并将一下内容下入index.android.js文件：[javascript]viewplain'usestrict';importReactfrom'react';import{AppRegistry,StyleSheet,Text,View}from'react-native';classHelloWorldextendsReact.Component{render(){return(Hello,World)}}varstyles=StyleSheet.create({container:{flex:1,justifyContent:'center',},hello:{fontSize:20,textAlign:'center',margin:10,},});AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);在AndroidStudio中，在moudle的build.gradle文件中添加一下内容：[javascript]viewplainallprojects{repositories{maven{//AllofReactNative(JS,Androidbinaries)isinstalledfromnpmurl"$rootDir/node_moles/react-native/android"}}}在AndroidManifest.xml文件中添加网络访问权限（仅在开发或调试中需要该权限）：
H. React-Native-Android怎么封装原生组件
提供原生视图很简单：
创建一个ViewManager的子类（或者更常见的，SimpleViewManage的派生类）。
实现createViewInstance方法。
导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。
把这个视图管理类注册到应用程序包的createViewManagers里。
实现JavaScript模块。
在开始之前，先创建一个工程，命令如下：
React-native init NativeView
第一步. 创建ViewManager的子类MyTextViewManager
第二步.实现方法createViewInstance
第三步. 通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法
上面三步中MyTextViewManager的整个代码如下：
public class MyTextViewManager extends SimpleViewManager<TextView> {
@Override
public String getName() {
return "MyTextView";
}
@Override
protected TextView createViewInstance(ThemedReactContext reactContext) {
TextView textView = new TextView(reactContext);
return textView;
}
@ReactProp(name = "text")
public void setText(TextView view, String text) {
view.setText(text);
}
@ReactProp(name = "textSize")
public void setTextSize(TextView view, float fontSize) {
view.setTextSize(fontSize);
}
@ReactProp(name = "textColor", defaultInt = Color.BLACK)
public void setTextColor(TextView view, int textColor) {
view.setTextColor(textColor);
}
@ReactProp(name = "isAlpha", defaultBoolean = false) public void setTextAlpha(TextView view, boolean isAlpha) {
if (isAlpha) {
view.setAlpha(0.5f); }
}}
第四步：注册MyTextViewManager。
创建类MyReactPackage，实现ReactPackage的方法createViewManager，在该方法中注册上面的组件MyTextViewManager。实现ReactPackage时，需要实现这三个方法，学过导入原生模块部分时我们应该很熟悉了。封装的原生模块放在createNativeMoles里，封装的原生UI组件放在createViewManagers里。需要注意的是剩下的最后一个方法createJSMoles里默认是返回null，要改成返回空集合，否则编译时会报错。
代码如下：
public class MyReactPackage implements ReactPackage {
@Override
public List<NativeMole> createNativeMoles(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<Class<? extends JavaScriptMole>> createJSMoles() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new MyTextViewManager()
);
}
}
MyReactPackage还需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的react-native应用文件夹的android目录中。具体路径是: android/app/src/main/java/com/your-app-name/MainApplication.java.
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyReactPackage()
);
}
第五步：实现对应的JS模块。
最后一步就是创建JavaScript模块并且定义Java和JavaScript之间的接口层。大部分过程都由React底层的Java和JavaScript代码来完成，你所需要做的就是通过propTypes来描述属性的类型。
新建一个MyTextView.js文件。代码如下：
import { PropTypes } from 'react';
import {requireNativeComponent,View} from'react-native';
var myTextView ={
name:'MyTextView',
propTypes:{
text:PropTypes.string,
textSize:PropTypes.number,
textColor:PropTypes.number,
isAlpha:PropTypes.bool,
...View.propTypes // 包含默认的View的属性
}
}
mole.exports =requireNativeComponent('MyTextView',myTextView);
最后：然后你就可以在js代码中引用刚才的组件了，