Android React Native的使用細節問題

標籤：

踩了幾天React Native Android的坑。總結為一句話，目前android學習react native還為時過早，坑太多，需要你慢慢去踩。就目前來講，能踩的坑基本上都踩了一遍，所以還是等它穩定下來再去學吧，否則會浪費掉一大堆時間。

單位

在React Native中，組件的寬度，高度都是不用寫單位的，你寫個100，在Android中代表的到底是100px還是100dp，就不得而知了，這時候自己實踐一下就一目瞭然了。

var Dimensions = require(‘Dimensions‘);var PixelRatio = require(‘PixelRatio‘);var AwesomeProject = React.createClass({  render: function() {    return (        <Text style={styles.test}>            window.width={Dimensions.get(‘window‘).width+"\n"}            window.height={Dimensions.get(‘window‘).height+"\n"}            pixelRatio={PixelRatio.get()}        </Text>    );  }});

在我的小米3上，輸出的是，而我的小米3的解析度是1080*1920

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

顯然輸出的是dp的單位，那麼如果要轉成對應的px的單位怎麼轉呢，答案就在上面的pixelRatio，將dp單位* pixelRatio就是對應的px的值了，同理px/pixelRatio就是對應的dp的值了。和android中px與dp的轉換是一樣的。

圖片

• 圖片的顯示需要指定寬度和高度，否則不會顯示
• 圖片資源載入可以從遠處載入，也可以從本地載入

遠處載入的方式如下

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

這種方式的優勢是引入方式簡單，更新方便，只需要替換server上的圖片即可，不需要修改原始碼
缺點也很明顯，即初次請求圖片時，需要請求server，圖片過大的，請求的延時會很大

本地載入需要注意的是圖片需要打包，然後據說可以載入手機本地圖片，然而我測試了n遍無果，根本載入不進來

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

除了載入本地資源，還可以載入靜態資源，這個資源需要打包才能使用，也就是不能使用伺服器擷取js的方式，必須打包後放在assets目錄下才能使用，測試後發現也沒有什麼卵用。

    <Image source={ require(‘image!icon‘) } />

系統

如果要判斷當前系統是android還是ios，從而進行一些適配工作，可以使用Platform

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

如果在android中，介面會輸出android，如果在ios中會輸出ios，當然上面的Platform也可以這麼定義

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

Toast的使用

有時候為了方便測試，經常會toast，React Native為android也提供了這麼一個組件ToastAndroid ，使用方法如下

var ToastAndroid = require(‘ToastAndroid‘);ToastAndroid.show(‘提示的資訊‘, ToastAndroid.SHORT);

或者

var {  AppRegistry,  StyleSheet,  Text,  View,  ToastAndroid} = React;ToastAndroid.show(‘提示的資訊‘, ToastAndroid.SHORT);

flex布局

• View預設寬度為100%
• 當flexDirection的值為column時， justifyContent:’center’為垂直置中， alignItems:’center’為水平置中
• 當flexDirection的值為row時， justifyContent:’center’為水平置中， alignItems:’center’為垂直置中

定位

• 和css的標準不同的是， 元素父容器不用設定position：’absolute|relative’ 。預設相對於父容器進行位移。

Android React Native的使用細節問題