Details of the use of Android React native

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