After a brief period of technical research and analysis, I decided to integrate RN with the existing QDaily project and replace the AD performance display page.

This article is developed for Mac and React Native version 0.30. Meanwhile, RN is only integrated into the original Native project as a plug-in situation, so it is mainly a Native project rather than an RN project

Also, this article assumes that you already have an iOS or Android development environment locally, which means that you are at least an Android or iOS developer.

1. Necessary environment configuration

Install node.js first, you can download the PKG package, or you can install the command line:

brew install node
Copy the code

Install the React Native command line tool (react-native cli).

npm install -g react-native-cli
Copy the code

In this way, the most important thing is installed, and other things can be used according to their own circumstances. Anything that goes wrong here can go directly to the website or StackOverflow.

2. Integration into iOS

IOS is a little bit more complicated.

QDaily’s iOS and Android clients each maintain their own code and Git repositories, but React Native, as a cross-platform solution, should use a single repository to manage a single set of code. Therefore, git repository is used to manage RN related codes, and git submodule is used to introduce the original project. At the same time, add a React folder to the root of the git repositories on both platforms and put all RN code related folders in it.

Take a screenshot of the final iOS directory structure: View images

  • Node_modules: React Native dependencies, RN-related JS and Android and iOS dependencies lib.
  • Package. json: configuration file of the NPM package of the current project. That’s where the node_modules folder comes in
  • Index.ios. js: js script loaded on the ios platform
  • Index.android. js: js script loaded on the Android platform

1. Init RN project

React-native init [Project Name]

react-native init QDailyCopy the code

2, the original project increased dependence

After initialization, open the react/ios project of the same name and see the dependency proj: view the image below

Open the original project again, create a new group, and drag all the proJ in the figure above into it. Depend on project completion. Delete the react/ios and react/ Android folders.

In the Build Phases interface of the original project, click the + sign at the bottom of the Link Binary With Libraries to add all libRCT

3, add header file (h file)

TARGETS->Build Settings->Header Search Paths add “$(SRCROOT)/react/node_modules/react-native/ react “, select recursive. Review images

4. Add RN PreBuild shell scripts

Here is the bundle used to start node.js server correctly in the simulator and compile RN correctly in the real machine.

On the TARGETS Build Phases screen, click the + sign, select New Run Script Phase, add a Script, name it Bundle React Native Code and images, and fill the content with the following code:

export NODE_BINARY=node
./react/node_modules/react-native/packager/react-native-xcode.shCopy the code

The details are as follows: View the picture

5. Native fixed code configures the bundle pointing to

Look directly at the code:

#pragma - mark RCTBridgeDelegate
- (NSURL*) sourceURLForBridge:(RCTBridge *)bridge {
#if (TARGET_IPHONE_SIMULATOR)
    return [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
    return [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"main" ofType:@"jsbundle"]];
#endif
}Copy the code

At this point, the original iOS project integration with React Native is complete. There are two simple techniques:

  1. CMD + R can be reload in the emulator
  2. If you do not want to debug RN on the real machine, check the box shown in step 4Run script only when installingTo avoid building the bundle every time. The diagram below:

    Review images

3. Integrate into existing Projects of Android

We assume that we have done iOS integration correctly in 2, and that the React folder is used for git repository management (node_modules ignore).

We also assume that your project only supports Android4.1 and above, since this is the lowest version RN supports.

1. Git configuration

Connect the React project git repository to the original Android project and import it into the original project root directory as git submodules. After pull, the directory structure is as follows: View an image

2. Initialize react

Run it in the React folder

Then you notice the node_modules folder reappears

Gradle configuration

Add local Maven dependencies to root gradle:

allprojects { repositories { ... maven { url "$projectDir/.. /react/node_modules/react-native/android" } } }Copy the code

Add a dependency to React Native for RN’s Module gradle file:

dependencies { ... The compile "com. Facebook. React: react - native: 0.30.0"}Copy the code

Gradle also adds NDK configuration for Android:

android {
    ...
    defaultConfig {
        ...
        ndk {
            abiFilters 'armeabi-v7a','armeabi','x86','mips'
        }
    }
}Copy the code

Sync and the configuration is complete.

4, run,

Android, unlike iOS, is not packaged in APK by default; In addition, the Android emulator is a VIRTUAL machine and cannot share a localhost with the Mac. Therefore, the general debugging method is as follows.

If you use the server bundle, you need to manually set the server IP address:

Now start the Server in the root directory of the React file:

  • Under geny Motion, CMD + M brings up the development menu and selectDev Settings–Debug server host for deviceThen set the Mac IP address and port number.
  • Similarly, the real phone can be shaken up to bring up the development menu;
  • In the real machine above 4.4 can also set the reverse proxy, localhost to Mac, so that the default debugging can be. The code is as follows:
adb reverse tcp:8081 tcp:8081Copy the code

After the above setup is complete, you can select Reload JS to request a page refresh, which is equivalent to CMD + R in the iOS emulator.

Note: The development menu mentioned above is implemented by Facebook in the form of suspension window. If you use the weird Domestic Android system, it is likely to be disabled by the system by default, resulting in a blank screen. Please turn on the display suspension window permission in the respective ROM permission management.

To use the offline bundle, you need to manually package:

Here is a QDaily RN bundle package script I wrote for your reference. Because some places have customized our own hot update scheme, it is slightly different from the official one. I will introduce it in detail in the next QDaily React Native hot update scheme. Review images

Other developers of the project

Other developers on the project need to complete Step 1 and run NPM Install in the React directory to proceed with Native or RN development.

Refer to the link

Facebook. Making. IO/react – nativ…

React Native port for iOS – Updated version

React-native For Android

ReactNative’s native module development and release – iOS

React Native iOS Configuration tutorial