【REACT NATIVE 系列教程之七】统一ANDROID与IOS两个平台的程序

发布时间：2020-12-15 05:19:22 所属栏目：百科来源：网络整理

导读：本站文章均为李华明Himi 原创,转载务必在明显处注明：转载自【黑米GameDev街区】原文链接: http://www.himigame.com/react-native/2260.html 本篇介绍两个细节： 1. 关于如何将index.android.js 与index.ios.js统一管理起来。 2. Platform 组件的简单介绍

本站文章均为李华明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如下：

 
          1 
        
          2 
        
          3 
        
          4 
        
          5 
        
          6 
        
          7 
        
          8 
        
          9 
        
          10 
        
          11 
        
          12 
        
          13 
        
          14 
        
          15 
        
         import  
         React 
         , 
           
         { 
        
         AppRegistry 
          
         Component 
         View 
          
         } 
           
         from 
           
         'react-native' 
         ; 
        
         import  
         Main  
         from 
         './Main' 
         ; 
        
         class 
           
         AwesomeProject 
           
         extends 
         Component 
         { 
        
         render 
         ( 
         ) 
         { 
        
         return 
         ( 
         < 
         Main 
         / 
         > 
         ) 
         ; 
        
         } 
        
         } 
        
         . 
         registerComponent 
         ( 
         'AwesomeProject' 
           
         = 
         > 
           
         AwesomeProject 
         ;

3.index.android.js如下：