How to compile the Reactnative sample program examples

Source: Internet
Author: User

It is helpful to learn reactnative by using the sample program to see the use of some basic components.

Compiling the sample program requires importing the entire project into Androidstudio, Androidstudio selecting the React-native/reactandroid directory when importing the project.

Because the project relies on the NDK so if you want to compile examples also need to install the Config NDK directory, after downloading the NDK is a self-extracting program that releases the NDK directory.
Then you need to set the environment variable or create a new local.properties file in the react-native root directory, the file content is as follows:
Sdk.dir=c:\ Your SDK Directory
Ndk.dir=c:\ your NDK directory

Settings to be compiled later, the process of import and compilation is more tortuous, please continue to see below.

When compiling the Awesomeproject project, the NDK is not used, in fact the NDK is not used by default, except that the NDK in the Gradle setting has to be configured with the NDK to import the project.

The NDK is used in compiling the core library, the core library is located in React-native/reactandroid, and the entire project is being imported in Lib form.
Looking at Uiexplorer in the examples directory, you will find that the Build.gradle is imported into the core library online. The import by source is commented out.

dependencies {
Compile Filetree (dir: ' Libs ', include: [' *.jar '])
Compile ' com.android.support:appcompat-v7:23.0.1 '

Depend on pre-built React Native
Compile ' com.facebook.react:react-native:0.11.+ '

Depend on React Native source.
This was useful for testing your changes if working on React Native.
Compile project (': Reactandroid ')
}

So, compiling uiexplorer doesn't require the NDK, and if you don't want to set up the NDK, there are 2 ways

1. Copy the Build.gradle,settings.gradle from the Awesomeproject project to the Uiexplorer Android directory and select uiexplorer/android when importing the project. This androidstudio will import a single item, otherwise the entire project will be imported.

2. Create a new project with the same name with Androidstudio, and then copy the files in the Uiexplorer directory to the new project.

After compiling, start the server side and execute it under the React-native directory:
NPM Install
Node Packager\packager.js

If an error occurs under Windows, you need to modify the code based on the error
Http://www.cnblogs.com/zhaojietec/p/4853273.html

However, it is important to note that, so far, Uiexplorer under Android has a bug,ios under no problem, through Google can find a solution.
https://github.com/facebook/react-native/issues/2855

The reason is that the JS code and Android native code out of sync, through Build.gradle can see the reference under Android Reactnative Core Library is 11, and the JS code version has been updated to 12.

There are 2 solutions, one is to use git tools (such as Smartgit), the JS code to revert to the previous version, another way is to recompile the Reactnative core library, the kernel library needs to compile the NDK, there is no problem in the Mac, the Windows compilation error.
Compile the reactnative core Library, modify the commented-out dependencies under Uiexplorer, and the slower compilation requires downloading third-party dependent libraries online.

dependencies {
Compile Filetree (dir: ' Libs ', include: [' *.jar '])
Compile ' com.android.support:appcompat-v7:23.0.1 '

Depend on pre-built React Native
Compile ' com.facebook.react:react-native:0.11.+ '

Depend on React Native source.
This was useful for testing your changes if working on React Native.
Compile project (': Reactandroid ')
}

Due to the inability to compile under Windows, this provides a compiled AAR file and modifies the dependencies in the Uiexplorer build.gradle. As for how to import AAR files, you can search by yourself.
Of course the Mac can also use this AAR, can save a lot of trouble.

Network disk (requires password):
Links: Http://share.weiyun.com/f4460735f3b44a4e79ddc7032d6f95f7

Since I have just built the public number has no one to pay attention to, so please follow my public number: Zhaojietec, reply to "AAR" after obtaining the password.
Yes, you are not mistaken, this is the legend of the hidden content please reply to view.

In addition, the network also provides a compiled loader program, Uiexplorer (Ps:facebook is really not nice why not provide a compiled program to see what to think about it).

How to compile the Reactnative sample program examples

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.