Android React Native Usage Details

Android React Native Usage Details

After several days of React Native Android attacks. To sum up, it is too early for android to learn react native, so you need to step on it. For the time being, you can step on all the pitfalls, so you should wait for it to stabilize before learning. Otherwise, it will waste a lot of time.

Unit

In React Native, the width and height of the component do not need to be written in units. If you write a 100 value, it is unknown whether it represents 100px or 100dp in Android, at this time, you will be able to practice it at a glance.

            window.width={Dimensions.get('window').width+"\n"}            window.height={Dimensions.get('window').height+"\n"}            pixelRatio={PixelRatio.get()}            );  }});" data-snippet-id="ext.7bfb646561fe67a5326cbf4ef608053e" data-snippet-saved="false" data-csrftoken="D0aGxWSM-Z-gCjvyW3XSBeveq1XPkNr28YpU" data-codota-status="done">var Dimensions = require('Dimensions');var PixelRatio = require('PixelRatio');var AwesomeProject = React.createClass({  render: function() {    return (        
  
               window.width={Dimensions.get('window').width+"\n"}            window.height={Dimensions.get('window').height+"\n"}            pixelRatio={PixelRatio.get()}        
      );  }});

On my Xiaomi 3, the output is, and the resolution of my Xiaomi 3 is 1080*1920

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

Obviously, the output unit is the unit of dp. If you want to convert the unit to the corresponding px, the answer is in the pixelRatio above. The unit of dp * pixelRatio is the corresponding px value, similarly, px/pixelRatio is the corresponding dp value. The conversion of px and dp in android is the same.

You must specify the width and height for image display. Otherwise, image resources cannot be loaded from a distance or locally.

The remote loading method is as follows:

The advantage of this method is that the introduction method is simple and easy to update. You only need to replace the image on the server without modifying the source code.
The disadvantage is also obvious, that is, when you request an image for the first time, you need to request the server. If the image is too large, the request latency will be high.

During local loading, You need to note that the image needs to be packaged, and then it is said that the local image of the mobile phone can be loaded. However, I tested it n times and it was fruitless, and it could not be loaded.

" data-snippet-id="ext.ebaf3fd8c32d616c21e1f0f5d250abfd" data-snippet-saved="false" data-csrftoken="M2nhZ3Aw-4XgyXqgT-4T9siRdYM66LnRzVpE" data-codota-status="done"> 

In addition to loading local resources, you can also Load Static resources. This resource must be packaged for use, that is, the server cannot be used to obtain js resources. It must be packaged and placed in the assets Directory for use, after the test, it is found that there is no egg.

System

You can usePlatform

        
  
             {Platform.OS}        
              );  }});" data-snippet-id="ext.35d6e79f1b2aecd15192d4905cdeb595" data-snippet-saved="false" data-csrftoken="BUmP1AAG-BQrRmb6FnIwiU9dvJUgmcncplRk" data-codota-status="done">var Platform = require('Platform');var AwesomeProject = React.createClass({  render: function() {    return (        
           
    
               {Platform.OS}        
            
       );  }});

If android is used, android is output on the interface, and ios is output on ios, the Platform above can also be defined as follows:

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

Toast usage

Sometimes toast is often used to facilitate testing. React Native also provides such a component ToastAndroid for android as follows:

Var ToastAndroid = require ('toastandroid'); ToastAndroid. show ('prompt information', ToastAndroid. SHORT );

Or

Var {AppRegistry, StyleSheet, Text, View, ToastAndroid} = React; ToastAndroid. show ('prompt information', ToastAndroid. SHORT );

The default width of the flex Layout View is 100%. When the flexDirection value is column,JustifyContent: 'center'Vertical center,AlignItems: 'center'Horizontal center. When the value of flexDirection is row,JustifyContent: 'center'Horizontal center,AlignItems: 'center'Unlike the css standard for vertical center positioning, the parent element container does not need to set position: 'absolute | relative '. Default displacement relative to parent container.