Windows下使用AndroidStudio+ReactNative开发Android应用
2016-09-17 13:22
746 查看
http://blog.csdn.net/asmcvc/article/details/51683799
http://blog.csdn.net/asmcvc/article/details/51683799
2016-06-15 17:19 1988人阅读 评论(1) 收藏 举报
分类:
Android汇总(40)
版权声明:本文为博主原创文章,未经博主允许不得转载。
一、环境配置
1、其他环境
如果之前有用AndroidStudio开发过安卓应用,Java环境和AndroidSDK都应该安装过了,否则需要安装一下。
另外需要安装Node.js(后面需要使用npm)。
2、安装react-native
1) 直接使用npm安装
在cmd命令工具中执行以下命令,注意并非 install react-native,装了react-native在后面init项目的时候会报错,需要卸掉再重装。
npm install -g react-native-cli
2) 先clone代码再npm安装
git clone https://github.com/facebook/react-native.git
代码clone成功后,进入目录react-native-cli下,例如我的是F:\opensource\react-native\react-native-cli,输入命令行:
npm install -g
安装好之后,可以命令行下就有react-native命令了
二、创建ReactNative项目
命令行:
react-native init HelloAndroid
该命令会去拉取下载ReactNative源代码和相关依赖组件,然后创建一个包含了ios和android的项目:
在AndroidStudio上打开HelloAndroid/android目录,等待gradle构建完毕后运行HelloAndroid程序(稍久),可以看到以下ReactNatibe经典报错UI:
这是因为我们还未启动react-native的服务。
命令行中进入项目目录,输入react-native start进行构建,等待一段时间。
react-native start
注意这里不是使用run-android,run-android适用于直接在机器上运行调试app。
构建完毕,在浏览器中访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。
我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口。
这里的IP是电脑的IP,端口号固定8081。
设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!
这个信息是在项目目录下index.android.js里的,可以打开看看:
注意Android5.0以上版本命令方式:
打开Android SDK目录 xxx\Android\sdk\platform-tools。在当前文件路径呼出命令行,输入:
adb reverse tcp:8081 tcp:8081
点击Reload JS 即可成功拉取ReactNative bundle。
参考:
React Native for Android Windows环境搭建
史上最详细Windows版本搭建安装React Native环境配置
React-Native学习指南
React Native技术周报
http://blog.csdn.net/asmcvc/article/details/51683799
Windows下使用AndroidStudio+ReactNative开发Android应用
2016-06-15 17:19 1988人阅读 评论(1) 收藏 举报分类:
Android汇总(40)
版权声明:本文为博主原创文章,未经博主允许不得转载。
一、环境配置
1、其他环境
如果之前有用AndroidStudio开发过安卓应用,Java环境和AndroidSDK都应该安装过了,否则需要安装一下。
另外需要安装Node.js(后面需要使用npm)。
2、安装react-native
1) 直接使用npm安装
在cmd命令工具中执行以下命令,注意并非 install react-native,装了react-native在后面init项目的时候会报错,需要卸掉再重装。
npm install -g react-native-cli
2) 先clone代码再npm安装
git clone https://github.com/facebook/react-native.git
代码clone成功后,进入目录react-native-cli下,例如我的是F:\opensource\react-native\react-native-cli,输入命令行:
npm install -g
安装好之后,可以命令行下就有react-native命令了
二、创建ReactNative项目
命令行:
react-native init HelloAndroid
该命令会去拉取下载ReactNative源代码和相关依赖组件,然后创建一个包含了ios和android的项目:
在AndroidStudio上打开HelloAndroid/android目录,等待gradle构建完毕后运行HelloAndroid程序(稍久),可以看到以下ReactNatibe经典报错UI:
06-15 11:27:15.440 4649-4649/com.helloandroid E/unknown:React: Exception in native call from JS java.lang.RuntimeException: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server. Try the following to fix the issue: Ensure that the packager server is running Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:860) at com.facebook.react.ReactInstanceManagerImpl.access$700(ReactInstanceManagerImpl.java:98) at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:194) at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:177) at android.os.AsyncTask$2.call(AsyncTask.java:288) at java.util.concurrent.FutureTask.run(FutureTask.java:237) at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:231) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587) at java.lang.Thread.run(Thread.java:841) Caused by: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server. Try the following to fix the issue: Ensure that the packager server is running Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y at com.facebook.react.common.futures.SimpleSettableFuture.get(SimpleSettableFuture.java:68) at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:831) ... 9 more Caused by: java.lang.RuntimeException: Could not connect to development server. Try the following to fix the issue: Ensure that the packager server is running Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y at com.facebook.react.bridge.ReactBridge.loadScriptFromAssets(Native Method) at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:32) at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:148) at com.facebook.react.ReactInstanceManagerImpl$4.call(ReactInstanceManagerImpl.java:851) at com.facebook.react.ReactInstanceManagerImpl$4.call(ReactInstanceManagerImpl.java:832) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$1.run(MessageQueueThreadImpl.java:73) at android.os.Handler.handleCallback(Handler.java:733) at android.os.Handler.dispatchMessage(Handler.java:95) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) at android.os.Looper.loop(Looper.java:136) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:197) ... 1 more
这是因为我们还未启动react-native的服务。
命令行中进入项目目录,输入react-native start进行构建,等待一段时间。
react-native start
注意这里不是使用run-android,run-android适用于直接在机器上运行调试app。
构建完毕,在浏览器中访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。
我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口。
这里的IP是电脑的IP,端口号固定8081。
设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!
这个信息是在项目目录下index.android.js里的,可以打开看看:
class HelloAndroid extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Shake or press menu button for dev menu </Text> </View> ); } }
注意Android5.0以上版本命令方式:
打开Android SDK目录 xxx\Android\sdk\platform-tools。在当前文件路径呼出命令行,输入:
adb reverse tcp:8081 tcp:8081
点击Reload JS 即可成功拉取ReactNative bundle。
参考:
React Native for Android Windows环境搭建
史上最详细Windows版本搭建安装React Native环境配置
React-Native学习指南
React Native技术周报
相关文章推荐
- Windows下使用AndroidStudio+ReactNative开发Android应用
- Windows下使用AndroidStudio+ReactNative开发Android应用
- React-Native 之Android应用开发踩坑纪 (一)————windows环境下配置
- react-native for android windows开发环境搭建详细记录
- ReactNative 开发Android应用
- React-Native-Android-Studio整合开发+环境配置+官方实例
- Windows下React Native Android开发环境的搭建
- 【React Native 安卓开发】----侧边栏的实现DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】
- 在 windows 开发 reactNative 的环境 搭建过程 react-native-android
- 【React Native开发】React Native控件之ToolbarAndroid工具栏控件讲解以及使用(15)
- Android 原生开发、H5、React-Native使用利弊和场景技术分享
- android 应用开发:android studio使用笔记
- react-native —— 在Windows下搭建React Native Android开发环境
- Visual Studio Tools for Apache Cordova,基于HTML 5/JavaScript 开发iOS,Android,Windows应用
- React-Native搭建开发环境-Android-Windows
- 2.android 原生应用和React native 结合开发.环境搭建
- react-native 搭建windows下android开发环境
- 4、在已有的Android应用中使用React Native
- windows 下搭建react-native android 开发环境