综合技术

React Native Development on Windows

微信扫一扫,分享到朋友圈

React Native Development on Windows
0

I’m presently teaching a class on mobile application development and have decided to share my notes about how to get things working. For this exercise I’m starting with a clean install of Windows 10 64-bit and I will walk through the steps I took, including the errors I encountered (so that if you get the same errors you might find this blog post!).

Download Android Studio and install both Android Studio and Android Virtual Device. Check the box to install the Android Virtual Device. Note that the dialog warns that the SDK location should not contain whitespace:

:

So, I’ll just put the SDK into C:Android.


The download and unzip process takes some time. When it finishes we have the Welcome screen. At the bottom there is a drop-down menu:


Select the SDK Manager command to confirm that you have installed an SDK in a path without a space. Make a note of this since we will need it for the ANDROID_HOME environment variable later:


Select the AVD (Android Virtual Device) Manager command to view the emulator that got created for you. Note that this is a “Google API” emulator. We may want to create another one with “Google Play”.


Click the green arrow under the Actions column to start an emulator. I got a warning that that the emulator is using a “compatibility renderer”, which is fine with me. The emulator will show in the Task Manager as “qemu-system-x86_64.exe” and will take a lot of memory and CPU!


Install Node.js accepting all the defaults. When that finishes run the following in a command shell:

npm install -g react react-native react-native-cli


From a command prompt enter the following:

react-native init HelloWorld

cd HelloWorld

react-native run-android

This will open a new “node” window with the title “Running Metro Bundler on port 8081.”

If you get a Windows Security Alert asking if you want allow an application to communicate on the network, click “Allow access”:


On the original command prompt, you may see the following:

“ERROR: JAVA_HOME is not set and no ‘java’ command could be found in your PATH.”

To solve this open your system settings and add an environment variable for

“JAVA_HOME”

with the value

“C:Program FilesAndroidAndroid Studiojre”

Close the node window and reopen the command shell and try again

cd HelloWorld

react-native run-android


The process should get further but is likely to give you an error:

“SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.”

Just as we did with above with JAVA_HOME, we now need to set an environment variable for

“ANDROID_HOME”

with the SDK location selected above and found on the SDK System Settings:

“C:Android”

Close the node window and reopen the command shell and try again

cd HelloWorld

react-native run-android


If all goes well this should have a successful build and the Metro window should show a build process and the emulator should show “Welcome to React Native!”.


Open App.js using a text editor:


Replace “Welcome to React Native!” with something personal and save the file.


Return to the emulator and “Double tap R on your keyboard to reload”.


Install Chrome to support debugging. With the emulator in the foreground, press <Ctrl>+<M> on the keyboard. This should bring up a developer menu. Select “Debug JS Remotely”:


When Chrome opens, press <Ctrl>+<Shift>+<J> to open the console.


Add some debugging code to App.js; for example, add a line to the end of the file:

console.log(“This is a message from my code to the console”);

Save App.js, then in the emulator double tap R to reload the app. You should see your message in the Chrome console.


Advertisements

阅读原文...


微信扫一扫,分享到朋友圈

React Native Development on Windows
0

Avatar

Analysing National Budgets With File System Tools

上一篇

游戏手机成伪需求,国内厂商靠什么自我救赎?

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

React Native Development on Windows

长按储存图像,分享给朋友