Details of the use of Android React native

Source: Internet
Author: User



Stepping on the react Native Android pit for a few days. summed up as a sentence, the current Android learning react native is too early, too many pits, you need to step slowly. At present, can trample the pit basically all tread once, so still wait for it to stabilize to learn again, otherwise will waste a lot of time.


Unit


In react native, the width of the components, height are not written units, you write a 100, in the end of Android is 100px or 100DP, it is unclear, this time to practice a glance at the moment.


var  Dimensions = require (  ' Dimensions ' ); var  Pixelratio = require ( ' pixelratio ' ); var  Awesomeproject = React.createclass ({render: function   ()  { return  (<text style={s tyles.test}> window.width={dimensions. Get  ( ' window ' ). Width+ "\ n" } Window.heigh T={dimensions. Get  ( ' window ' ). Height+ "\ n" } pixelratio= {Pixelratio. get  ()} </Text>); }});



window.width=360window.height=640pixelRatio=3


Obviously the output is the unit of DP, then if you want to turn to the corresponding PX unit how to turn, the answer is in the above Pixelratio, the DP unit * pixelratio is the corresponding PX value, the same px/pixelratio is the corresponding DP value. and the conversion of PX to DP in Android is the same.


Image
    • The display of the picture needs to specify the width and height, otherwise it will not display
    • Picture resource loading can be loaded from a distance, or it can be loaded locally


The way to load in the distance is as follows


<Image source={{uri:‘http://your.host/your.png‘}}


The advantage of this approach is the introduction of simple, easy to update, only need to replace the image on the server, you do not need to modify the source code
The disadvantage is also obvious, that is, the initial request for a picture, you need to request the server, the picture is too large, the delay of the request will be very large



Local load note that the picture needs to be packaged, and then it is said to be able to load the local image of the phone, but I tested n times no results, not loaded in


 <Image style={{width:100,height:100}} source={{isStatic: true, uri: ‘/sdcard/icon.png‘ }}/>


In addition to loading the local resources, you can also load static resources, this resource needs to be packaged to use, that is, you can not use the server to get JS, must be packaged and placed in the assets directory to use, testing found that there is no OVA.


sourcerequire(‘image!icon‘) } />
System


If you want to determine whether the current system is Android or iOS, so that you can do some adaptation work, you may use the Platform


var Platform = require(‘Platform‘);var AwesomeProject = React.createClass({  render: function() { return ( <View> <Text> {Platform.OS} </Text> </View> );  }});


If in Android, the interface will output Android, if iOS is output iOS, of course, the above platform can also be defined as such


var {  AppRegistry,  StyleSheet,  Text,  View,  Platform} = React;
Use of Toast


Sometimes for the convenience of testing, often toast,react native for Android also provides such a component toastandroid, using the following methods


varrequire(‘ToastAndroid‘);ToastAndroid.show(‘提示的信息‘, ToastAndroid.SHORT);


Or


var {  AppRegistry,  StyleSheet,  Text,  View,  ToastAndroid} = React;ToastAndroid.show(‘提示的信息‘, ToastAndroid.SHORT);
Flex layouts
    • View default width is 100%
    • When the value of flexdirection is column, justifycontent: ' Center ' is vertically centered, alignitems: ' Center ' is horizontally centered
    • When the value of flexdirection is row, justifycontent: ' Center ' is centered horizontally, alignitems: ' Center ' is vertically centered
Positioning
    • Unlike the standard CSS, the element parent container does not have to set position: ' Absolute|relative '. The default is offset relative to the parent container.


Details of the use of Android React native


Related Article

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.