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

   <p>本篇介绍两个细节：</p>    <p>1. 关于如何将index.android.js 与index.ios.js统一管理起来。</p>    <p>2.  Platform 组件的简单介绍与使用 </p>    <p>一：将index.android.js 与index.ios.js统一管理起来。</p>    <p>由于React本身就是跨平台的，但是创建的React项目总会有各自不同的程序入口文件，如下图展示目录结构：</p>    <p><img src="https://simg.open-open.com/show/35a641c7ec5f4208ce21e241a5a8de30.jpg"></p>    <p>标识1：这里是两个平台的项目文件夹，这里一般就是针对各平台不同配置、嵌入第三方插件等专属平台相关设置与添加的地方。</p>    <p>标识2:  React 在不同平台调用的不同入口文件。</p>    <p>那么正常情况下，我们只要不涉及到某个平台独有的特性代码、组件或插件等，我们就完全没有必要走两个不同的入口。否则在Android上运行可能index.ios下运行的代码段还要拷贝到index.android里，反之亦然。</p>    <p>因此我们可以新建一个组件class 让俩平台共同显示这个class，就可以避免这种来回拷贝浪费的时间。</p>    <p>1. 假设我们新建了一个叫Main.js的组件Class</p>    <p>2. 然后index.ios.js如下：</p>    <pre>  <code class="language-javascript">importReact, {    AppRegistry,    Component,    View,  } from 'react-native';     importMainfrom './Main';     class AwesomeProject extends Component {         render() {    return (<Main/>);    }  }  AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);  </code></pre>    <p>3.index.android.js如下：</p>    <pre>  <code class="language-javascript">importReact, {    AppRegistry,    Component,    View,  } from 'react-native';     importMainfrom './Main';     class AwesomeProject extends Component {       render() {   return (<Main/>);   }  }  AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);  </code></pre>    <p>这样统一显示Main组件的内容，以后不论在android还是ios平台都可以完美兼容，小细节，估计大家一看就懂。</p>    <p>二. Platform 组件的简单介绍与使用 </p>    <p>有时候我们会区分平台做一些处理，比如充值、适配问题、接入第三方SDK或与原生平台组件进行交互等等。</p>    <p>这时我们就需要 RN提供的 Platform 组件～ 使用很简单，就不多赘述了。</p>    <p>示例：</p>    <p>代码段1：（导入Platform组件）</p>    <pre>  <code class="language-javascript">importReact, {     ...    Platform,    ...  } from 'react-native';  </code></pre>    <p>代码段2:</p>    <pre>  <code class="language-javascript">estAlert(){      if(Platform.OS === 'ios'){        Alert.alert('测试当前平台', 'iOS平台');      }else if(Platform.OS === 'android'){        Alert.alert('测试当前平台', 'Android平台');      }    }       render() {      return (    <Viewstyle={styles.himiViewStyle} >    <Text style={styles.himiTextStyle}>HimiReactNative 教程</Text>             <Viewstyle={styles.himiViewStyle}>            <TouchableHighlight              underlayColor='#f00'              onPress={this.testAlert.bind(this)}              >              <Text style={{fontSize:20}}>点击查看当前平台</Text>            </TouchableHighlight>          </View>        </View>      )    }  </code></pre>    <p>主要看 testAlert 的函数中的内容，通过Platform.OS获取当前平台类型与android/ios做比较即可得知。</p>    <p>运行效果如下(点击查看动态图):</p>    <p><img src="https://simg.open-open.com/show/ffc9f740689acdacb8261e9f54eb6895.gif"></p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959673722784172728" rel="nofollow">http://www.himigame.com/react-native/2260.html</a></p>    <p> </p>