【REACT NATIVE 系列教程之七】统一ANDROID与IOS两个平台的程序入口&&区分平台的组件简介

本站文章均为  李华明Himi  原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文连接:  http://www.himigame.com/react-native/2260.html

      本篇介绍两个细节：

      1. 关于如何将index.android.js 与index.ios.js统一管理起来。

      2.  Platform 组件的简单介绍与使用 

 一：将index.android.js 与index.ios.js统一管理起来。

因为React自己就是跨平台的，可是建立的React项目总会有各自不一样的程序入口文件，以下图展现目录结构：

标识1：这里是两个平台的项目文件夹，这里通常就是针对各平台不一样配置、嵌入第三方插件等专属平台相关设置与添加的地方。

标识2:  React 在不一样平台调用的不一样入口文件。

那么正常状况下，咱们只要不涉及到某个平台独有的特性代码、组件或插件等，咱们就彻底没有必要走两个不一样的入口。不然在Android上运行可能index.ios下运行的代码段还要拷贝到index.android里，反之亦然。

所以咱们能够新建一个组件class 让俩平台共同显示这个class，就能够避免这种来回拷贝浪费的时间。

1. 假设咱们新建了一个叫Main.js的组件Class

2. 而后index.ios.js以下：

import React, {
  AppRegistry,
  Component,
  View,
} from 'react-native';
 
import Main from './Main';
 
class AwesomeProject extends Component {
 
    render() {
   return (<Main/>);
   }
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

3.index.android.js以下：

import React, {
  AppRegistry,
  Component,
  View,
} from 'react-native';
 
import Main from './Main';
 
class AwesomeProject extends Component {
 
  render() {
 return (<Main/>);
 }
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

这样统一显示Main组件的内容，之后不论在android仍是ios平台均可以完美兼容，小细节，估计你们一看就懂。

 

        二. Platform 组件的简单介绍与使用 

有时候咱们会区分平台作一些处理，好比充值、适配问题、接入第三方SDK或与原平生台组件进行交互等等。

这时咱们就须要 RN提供的 Platform 组件～ 使用很简单，就很少赘述了。

示例：

代码段1：（导入Platform组件）

import React, { 
  ...
  Platform,
  ...
}

代码段2:

testAlert(){
    if(Platform.OS === 'ios'){
      Alert.alert('测试当前平台', 'iOS平台');
    }else if(Platform.OS === 'android'){
      Alert.alert('测试当前平台', 'Android平台');
    }
  }
 
  render() {
    return (
   <View style={styles.himiViewStyle} >
   <Text style={styles.himiTextStyle}>Himi React Native 教程</Text>
 
        <View style={styles.himiViewStyle}>
          <TouchableHighlight
            underlayColor='#f00'
            onPress={this.testAlert.bind(this)}
            >
            <Text style={{fontSize:20}}>点击查看当前平台</Text>
          </TouchableHighlight>
        </View>
      </View>
    )
  }

主要看 testAlert 的函数中的内容，经过Platform.OS获取当前平台类型与android/ios作比较便可得知。

运行效果以下(点击查看动态图):