react-native的兼容性（Android、Ios）

剛開始學習RN的時候，寫的代碼只支持ios版本，寫起來感受仍是比較順手的，也沒有太多的疑難雜症，以及模擬器不支持一些標籤的狀況，今天寫了支持android版本的代碼後，我整我的都很差了。。。

一、在定義導航的時候就出現了問題

若是是ios咱們就能夠用NavigatorIOS組件，建立方式以下：

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  NavigatorIOS,
  StyleSheet,
} = React;

var Home = require('Home文件的路徑');

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: '頁面標題',
          component: Home,
        }}
      />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

幾行代碼輕鬆搞定。

而到了android那就不是那麼簡單的了，須要用Navigator組件來搞定，並且你必需要設置renderScene屬性，來設置各個頁面的跳轉路由，建立方式以下：

//index.android.js

'use strict';

var React = require('react-native');

var Home = require('文件的路徑');
var Others = require('文件的路徑');

var {
    AppRegistry,
    Navigator,
    StyleSheet,
    View,
    BackAndroid,
    ToolbarAndroid,
    } = React;

var _navigator;
BackAndroid.addEventListener('hardwareBackPress', () => {
  if (_navigator && _navigator.getCurrentRoutes().length > 1) {
    _navigator.pop();
    return true;
  }
  return false;
});

var RouteMapper = function(route, navigationOperations) {
  _navigator = navigationOperations;
  if (route.name === 'Home') {
    return (
        <View style={{flex:1}}>
          <ToolbarAndroid
              actions={[]}
              navIcon={require('image!android_back_white')}
              onIconClicked={navigationOperations.pop}
              style={styles.toolbar}
              titleColor="white"
              title="頁面標題" />
          <Home navigator={navigationOperations} />
        </View>
    );
  }
  else if (route.name === 'Others') {
    return (
        <View style={{flex: 1}}>
          <ToolbarAndroid
              actions={[]}
              navIcon={require('image!android_back_white')}
              onIconClicked={navigationOperations.pop}
              style={styles.toolbar}
              titleColor="white"
              title={route.Others.title} />
          <Others
              style={{flex: 1}}
              navigator={navigationOperations}
              Others={route.Others}
              />
        </View>
    );
  }
};

var AwesomeProject = React.createClass({
  render: function() {
    var initialRoute = {name: 'Home'};
    return (
        <Navigator
            style={styles.container}
            initialRoute={initialRoute}
            configureScene={() => Navigator.SceneConfigs.FadeAndroid}
            renderScene={RouteMapper}
        />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  toolbar: {
    backgroundColor: '#a9a9a9',
    height: 56,
  }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

//Home文件裏會有這麼一段代碼：
this.props.navigator.push({
    title:responseText.data.title,
    name:'Others',
    Others:responseText.data
});

上面代碼中，route.name對應Home文件裏的name，ToolbarAndroid是android的導航條，只有頁面裏添加這個標籤纔能有導航條不然默認是沒有導航條的，Home文件裏的Others是相關Others頁面的數據。

二、如何判斷設備是ios仍是android

下面這段代碼輕鬆搞定這件事：

var {
    Platform
} = React;

if(Platform.OS === 'ios'){
    //ios相關操做
}else{
    //android相關操做
}

三、彈出框

//ios
alert();

//android
var {
    ToastAndroid
} = React;

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

四、TextIput

ios默認無下劃線的，而且文字垂直居中，而在android裏，看下面代碼：

<TextInput
    underlineColorAndroid = "transparent"  //android須要設置下劃線爲透明才能去掉下劃線
    textAlignVertical = "top"  //設置垂直位置
>
</TextInput>

五、android不支持WebView標籤