"React native development" React native porting native Android projects

Last Update:2016-01-14 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Reprint please indicate the source:http://blog.csdn.net/developer_jiangqq/article/details/50519677 This article is from: "jiang Qing's blog" ( i ) preface "good news" personal website has been running, the following blog and technical dry Goods and other wonderful articles will be synchronized update, please pay attention to the collection:http://www.lcode.orgWe have explained the react Native for Android environment, IDE installation configuration and application running, debugging related knowledge points. Today we are going to talk about a very useful point of knowledge. Porting our existing native Android project to react Native.Newly created React native Technical Exchange Group (282693535), Welcome to daniel, React Native technology enthusiasts to join the exchange! at the same time, the left of the blog Welcome to scan the subscription number, mobile technology dry, wonderful article technology push!In react native, react is actually more concerned with the views view Layer. So react native itself supports and allows us to easily and conveniently transplant an Android native project into react Native. ( two ) Prerequisite Preparation Work ①. first, We have an Android app built with gradle, which you can create directly from Android Studio. Here I create a new directory testhello, and then use Android Studio to build an Android project under that Folder. Specific as Follows:②. computer must have Node. JS installed, How to install it (click to Enter) ( three ) Android Project related configuration 2.1 Add react native dependencies in the Build.gradle of our Android project, then sync, the code is as Follows:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_1_3337369" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_1_3337369" name="code" class="java">Compile ' com.facebook.react:react-native:0.17.+ '</pre></pre> [ note This synchronizes the 0.17 version react native 0.13 No updates, my local reactnative is 0.17 version, So everyone here configuration must be consistent or updated with your local Version. On this subject I studied this afternoon and stepped on a lot of pits. ~~ but Span style= "color: #E84C22;" >reactnative I've got the webmaster update the version over There. 2.2 Next we need to add network access to the project Androidmanifest.xml<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_2_9814574" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_2_9814574" name="code" class="java"><uses-permission android:name= "android.permission.INTERNET"/></pre></pre>This is only used in the development phase to load the finest JavaScript code from the development server, and in the official release version, if necessary, the network permissions can be Deleted. ( four ) Adding native code In the mainactivity of the Android project, we need to configure the relevant code to start running the react native library. We need to create the Reactrootview and then render the react reference inside, and set it as the main view of the Activity.The specific code is as Follows:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_3_752667" name="code" class="java">public class Mainactivity extends Activity implements Defaulthardwarebackbtnhandler {privatereactrootview MREACTROOTVI ew Privatereactinstancemanager mreactinstancemanager; @Override protectedvoid onCreate (Bundle Savedinstancestate) {super.oncreate (savedinstancestate); Mreactrootview = new Reactrootview (this); Mreactinstancemanager = Reactinstancemanager.builder (). setapplication (getapplication ()). SetB Undleassetname ("index.android.bundle"). setjsmainmodulename ("index.android"). addpackage (new M Ainreactpackage ()). setusedevelopersupport (buildconfig.debug). setinitiallifecyclestate (Lifecy clestate.resumed). Build (); Mreactrootview.startreactapplication (mreactinstancemanager, "testhello", null); Setcontentview (mreactrootview); } @Override publicvoid invokedefaultonbackpressed () {super.onbackpressed (); }}</pre>Note the following code:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_4_6466505" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_4_6466505" name="code" class="java">Mreactrootview.startreactapplication (mreactinstancemanager, "testhello", null);</pre></pre>One of the above methods the second parameter of my side using Testhello to name, notice this to and the following things to unify, specifically we continue to look down.In react native, In fact FB provides us with the Reactinstancemanger to manage the activity related life cycle for us, So we need to pass some actitivty related life cycle to reactinstancemanger. The specific code OnPause () and the Onresume () method are as Follows:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_5_7404596" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_5_7404596" name="code" class="java">@Override protectedvoid onPause () { super.onpause (); If (mreactinstancemanager! = Null) { mreactinstancemanager.onpause ();} } @Override protectedvoid onresume () { super.onresume (); If (mreactinstancemanager! = Null) { mreactinstancemanager.onresume (this,this); } }</pre></pre>Immediately following the event that returns a button key we also need to pass:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_6_2802790" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_6_2802790" name="code" class="java">@Override public void onbackpressed () { if (mreactinstancemanager! = Null) { mreactinstancemanager.onbackpressed (); } else { super.onbackpressed (); }}</pre></pre>This allows us to handle the JavaScript code when the user presses the return key. of course, If the front end does not handle the event of the response, it will be recalled to the Invokedefaultonbackpressed () method Above. The fallback event is then transferred to the activity, and the following is how the activity should be executed. The default event is to close the Activity.The final step is to deal with the device menu, by default we can shake the phone to pop-up menu, but for the simulator, this method is not applicable, so we intercept the event method to deal with the Relevant.<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_7_7993240" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_7_7993240" name="code" class="java">@Overridepublic boolean onKeyUp (int keycode, keyevent event) { if (keycode = = Keyevent.keycode_menu && Mreactinstancemanager = Null) { mreactinstancemanager.showdevoptionsdialog (); return true; } return Super.onkeyup (keycode, event);}</pre></pre>This concludes our Android project activity and configuration files as well as the most basic configuration methods. ( five ) add js Let's take the command line and switch to the root of the project first (my example is to switch to the Testhello Directory)5.1. run NPM init on the command line as Follows: This command creates a Package.json file and prompts us to enter some information, which is not entered by default, but the name must be in full English lowercase oh, the results are as follows: 5.2. command line run NPM install--save react-native for installing react native module and related node module, run as Follows: Here we start installing the node module and the react native module, and the results will generate Node_module folders as Follows: 5.3. finally, Run the following command:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_8_3707079" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_8_3707079" name="code" class="java">Curl-o. flowconfig Https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig</pre></pre>Do a flow configuration All of the above three steps have been completed, and we have created the node module and added the react-native npm dependency. Next we need to modify the Package.json file and add the following code to the scripts tag:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_9_9105273" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_9_9105273" name="code" class="java">"start": "node_modules/react-native/packager/packager.sh"</pre></pre>The specific changes are as Follows: 5.4. Now we create a file named: index.android.js, and then add the following code inside:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_10_2867264" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_10_2867264" name="code" class="java">' Use strict '; var React = require (' react-native '); var { Text, View} = React; class Myawesomeapp extends React.comp Onent { render () { return ( <view style={styles.container}> <text style={styles.hello}> Hello, world</text> </View> ) }}var styles = React.StyleSheet.create ({ container:{ flex:1, justifycontent: ' center ', }, hello: { fontsize:20, textAlign: ' Center ', margin:10, },}); React.AppRegistry.registerComponent (' testhello ', () = testhello);</pre></pre>The above completed all the relevant code and React-native configuration, Note that the above are used testhello, I hope we all use the same name and the front mainactivity to unify Oh. ( six ) running the APP The above configuration steps are complete, we want to run the app, first we need to open the development server, using the following command:<pre code_snippet_id="1556601" snippet_file_name="blog_20160114_11_4294160" name="code" class="java"><pre code_snippet_id="1556601" snippet_file_name="blog_20160114_11_4294160" name="code" class="java">NPM start</pre></pre>The results of the operation are as Follows: Next is the final step, run the react-native run-android command to compile and run the application, and the result is as Follows: This completes the migration of a simple Android native project to Reactnative. ( seven ) Final summary The transplant of Android native project to react native was also met with many problems during the day, for example, because the official website was not kept up-to-date, and was later discovered by the mining pits. You can add a group of react native Technical Exchange Group (282693535) or the bottom of the reply to a bit. Respect the original, reproduced please specify: from sky, Qing (http://blog.csdn.net/developer_jiangqq) infringement must investigate! Follow my subscription number (codedev123), share mobile development Technology (android/ios), Project management, and blog posts every day! (welcome attention, The first time to push the wonderful Article)Follow my Weibo to get more content"React native development" React native porting native Android projects

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

"React native development" React native porting native Android projects

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support