使用index.ios.js而不仅仅是index.js的优点

Question

反应原生create-react-native-app的新手,用于为我的第一个应用程序制作脚手架.它做了一个App.js我认为相当于大多数应用程序index.js,并作为我的应用程序的入口点.

看着很多教程我看到独立的index.ios.js和index.android.js文件.我很困惑为什么这些应用程序为每个平台都有单独的文件.

我从这个问题中看到,甚至混合应用程序既使用单个文件,也使用单个文件index.js.

所有这些不同的选择让我感到困惑.什么情况会要求使用单独的文件而不是只有一个入口点？

Answer 1

所有这些不同的选择让我感到困惑.什么情况会要求使用单独的文件而不是只有一个入口点？

到目前为止,我还没有发现需要有不同的条目文件index.ios.js和index.android.js.我做的第一件事,以及大多数人似乎做的事情,就是在两个文件中添加如下内容.

import { AppRegistry } from 'react-native'
import App from './App/Containers/App'

AppRegistry.registerComponent('YourAppName', () => App)

你也可以删除它们,用一个index.js文件和上面的代码替换它们.不确定为什么更多人(包括我自己)不这样做.

我认为您也可以安全地遵循此模式,直到您发现需要在平台之间拆分逻辑.即使你这样做,我认为你不可能将它从条目文件中分离出来.您更有可能需要在叶节点中进一步拆分逻辑.

当您确实需要编写特定于平台的代码时,可以使用该Platform模块进行内联.

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: (Platform.OS === 'ios') ? 200 : 100,
});

要么 Platform.select

从'react-native'导入{Platform,StyleSheet};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

你也可以用它来选择合适的组件......

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;

最后一个例子也可以通过文件命名约定来完成.例如,如果您有以下两个组件文件......

|- Component.ios.js
|- Component.android.js

在你的文件中你只需要Component......

import Component from './Component';

捆绑器将根据.ios或.android位导入适当的组件.