React Native：如何结合 index.ios.js 和 index.android.js

Question

我正在使用面板模块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 设备上运行。 如有任何建议或意见，我们将不胜感激！

Answer 1

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

很简单，跟着这些步骤就搞定了。

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

Answer 2

解决方案

其中一种简单的方法是仅使用 index.js。您可以将 index.js 到 Platform

中的一些代码分开

为什么？

索引的优先级

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