"React Native and Combat" book serial "Configure IOS and Android development environment"

This article is my published book "React Native and actual combat" serial sharing, the book by the mechanical Industry publishing house, the book detailed React Native framework underlying principles, React Native component layout, components and API Introduction and code combat, and React Nati ve and IOS, Android platform of the mixed development of the underlying principles and code demonstration, a selection of a large number of instance code, convenient for readers to learn quickly.

Books also supporting the video tutorial "80 Practical Lessons proficient React Native development", this video course is recommended to cooperate with the book study, the Book of the Central Plains rational explanation of the relatively clear, and video tutorials for components, APIs and other parts of the code of the actual development of the explanation is more intuitive.

For all books related information, please visit: http://rn.parryqiu.com

This chapter will cover some of the pre-development preparations, including the development and debugging environments for IOS and Android, and some of the debugging properties in React Native, tips on Chrome remote debugging code, and React Developer Tools workers Installation and application of the tool.

5.1 Configuring the IOS development environment

First we need to configure the development environment of the iOS platform (only for iOS platform apps under Mac systems), and Apple provides developers with a very easy-to-use, powerful, environment-integrated development tool Xcode for developing IPhone, IPad, Apple Watch, and Ma C Platform for Applications.
The Xcode development tool provides the ability to develop, test, package, and publish the entire project, all in Xcode, a true one-stop development tool under the MAC.
The following describes and demonstrates the basic installation of the IOS development environment and the process of running the project for debugging.

1. Open the App Store to search for Xcode, click Install and wait for the download to complete and install automatically, as shown in 5-1.

Figure 5-1 Xcode Installation

1. Open the project with Xcode, where we open the 02-02-02 folder directly in the course Companion source folder, this project is the initialization project set up in the second chapter of this book, find the/helloreact/ios/helloreact.xcodeproj open in the folder, The xcodeproj suffix file is a project file for Xcode, as shown in 5-2.

Figure 5-2 using Xcode to open an IOS project

1. After selecting the corresponding simulator, click the Run button to start the project, first React Native will start a React packager used to package the source code as a bundle JS file, and for the post-commissioning of Live Reload and hot reloading to make As shown in 5-3.
   After the JavaScript package is complete, the simulator automatically launches and automatically runs the corresponding App, as shown in 5-4.

Figure 5-3 React Packager Console

Figure 5-4 Selecting the emulator and running the project

1. IOS APP launches with effect 5-5 shown.

Figure 5-5 IOS Project Startup effect

Modify the project App.js source 6th line of code, from the initialization project Welcome to React Native modified to Hello React Native, Save and use the shortcut key Command + R in the emulator to refresh, React Pack The Ager console is automatically repackaged, and the IOS App interface immediately refreshes automatically, as shown in Figure 5-7, 5-6.

1.  export default class App extends Component<{}> {  
2.    render() {  
3.      return (  
4.        <View style={styles.container}>  
5.          <Text style={styles.welcome}>  
6.            Welcome to React Native!  
7.          </Text>  
8.          <Text style={styles.instructions}>  
9.            To get started, edit App.js  
10.         </Text>  
11.         <Text style={styles.instructions}>  
12.           {instructions}  
13.         </Text>  
14.       </View>  
15.     );  
16.   }  
17. }  

Figure 5-6 React Packager automatic repackaging

Figure 5-7 App Interface Auto Refresh

5.2 Configuring the Android development environment

Android Studio is an integrated development environment for developing applications for the Android platform. Posted on Google I/O on May 16, 2013, available for developers to use free of charge. Android Studio is based on JetBrains IntelliJ idea, which is developed specifically for Android and works on Windows, Mac OS, and Linux platforms.
The features of Android Studio are very rich and its main features are as follows:

• Visual layout: WYSIWYG Editor, real-time encoding, real-time program Interface preview;
• Developer Console: Optimization tips, assistance with translation, source tracking, promotional and marketing graphs;
• Beta version testing, and staged display;
• Build support based on Gradle;
• Android specific code refactoring and quick fixes;
• Lint tip tool to better control capture of program performance, usability, version compatibility, and other issues;
• Support Proguard and application signature function;
• Template-based wizards to generate common Android app designs and components;
• Comes with a layout editor that lets developers drag and drop UI components, and preview UI display on devices of different sizes, and more;
• Support to build Android Wear app;
• Built-in Google Cloud Platform support for integration with Google Cloud Messaging and App Engine.

The following describes and demonstrates the basic installation and test run artifacts of the Android Studio development environment.
1. Download and install the Android Studio Developer tool and download the corresponding Java SDK. The official website address is: developer.android.com/studio/index.html.

2. After downloading and completing the installation, open Android Studio to find the right side of the import project, importing the/helloreact/android/folder in the 02-02-02 project folder, as shown in 5-8.

Figure 5-8 Importing Android projects

3. After importing an Android project, Android Studio will automatically load the corresponding version of Gradle to build the project, which may take a long time depending on your network condition. After the project is automatically built, 5-9 is shown.

Figure 5-9 Android Studio Project Open

4. After the project has completed Gradle build, launch Android Studio's Android emulator and click the Start button to start compiling the project and automatically complete the project's debug run in the emulator. Similarly, this process React Native automatically starts React Packager for source packaging and is used by Live Reload and hot reloading for post-commissioning. The execution process is 5-10 as shown in Figure 5-11 respectively.

Figure 5-10 React Packager in the Android environment

Figure 5-11 Android Emulator execution effect