【问题标题】：React native: how to combine index.ios.js and index.android.jsReact Native：如何结合 index.ios.js 和 index.android.js
【发布时间】：2018-09-19 01:59:21
【问题描述】：

我正在使用面板模块Expanding/Collapsing a panel with animations in React Native

这个库包含两个 .js 文件

index.ios.js：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

import React,{AppRegistry,StyleSheet,Text,ScrollView} from 'react-native';
import Panel from './components/Panel';

var Panels = React.createClass({
  render: function() {
    return (
      <ScrollView style={styles.container}>
        <Panel title="A Panel with short content text">
          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
        </Panel>
        <Panel title="A Panel with long content text">
          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
        </Panel>
        <Panel title="Another Panel">
          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</Text>
        </Panel>
      </ScrollView>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex            : 1,
    backgroundColor : '#f4f7f9',
    paddingTop      : 30
  },

});

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

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;
var Panels = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
AppRegistry.registerComponent('Panels', () => Panels);

我想将这两个文件合并到一个 index.js 中，有什么办法可以做到这一点吗？我希望这个库可以在 ios 和 android 设备上运行。任何建议或 cmets 将不胜感激提前感谢！

【问题讨论】：

标签： javascript react-native react-native-android react-native-ios

【解决方案1】：

解决方案

一种简单的方法是只使用index.js。您可以将index.js 到Platform 中的一些代码分开

为什么？

索引的优先级

index.ios.js = index.android.js > index.js

【讨论】：

【解决方案2】：

我猜index.ios.js 是你想要的 android 文件也对吗？它正在与ios 一起工作，现在您希望它也能在android 中正常工作。

很简单，按照这些步骤就完成了。

删除index.android.js
将index.ios.js 重命名为index.js

【讨论】：