拥有 index.ios.js 而不仅仅是 index.js 的优势 [英] Advantages of having index.ios.js instead of just index.js

问题描述

react-native 的新手并使用 create-react-native-app 为我的第一个应用程序制作脚手架.它创建了一个 App.js，我猜它相当于大多数应用程序的 index.js 并作为我的应用程序的入口点.

New to react-native and used create-react-native-app to make the scaffolding for my first app. It made an App.js which I guess is equivalent to most app's index.js and serves as the entry point to my app.

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

Looking at a lot of tutorials I'm seeing separate index.ios.js and index.android.js files. I'm confused as to why these apps have seperate files for each platform.

我从 这个问题 甚至有混合应用程序既使用单个文件又使用一个 index.js.

I see from this question that there are even hybrid apps that use both the individual files as well as one index.js.

所有这些不同的选项让我有点困惑.什么情况下需要使用单独的文件而不是只有一个入口点?

All these different options are kind of confusing me. What situations would call for using separate files vs just having one entry point?

推荐答案

所有这些不同的选项让我有点困惑.什么情况下需要使用单独的文件而不是只有一个入口点?

All these different options are kind of confusing me. What situations would call for using separate files vs just having one entry point?

到目前为止，我还没有发现需要有不同的入口文件 index.ios.js 和 index.android.js.我做的第一件事，也是大多数人所做的，就是在两个文件中添加如下内容.

So far, I've not found a need to have different entry files index.ios.js and index.android.js. The first thing I do, and what most people seem to do, is add something like the following to both files.

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

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

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

You could also delete them both, replacing them with a single index.js file and the above code as well. Not sure why more people (including myself) don't do that.

我认为您也可以安全地遵循此模式，直到您发现需要在平台之间拆分逻辑.即使您这样做了，我认为您也不太可能将它与入口文件本身分开.您更有可能需要在叶节点中进一步拆分逻辑.

I think you can safely follow this pattern as well until you find that you need to split your logic between the platforms. Even when you do, I think it's unlikely you'd ever split it from the entry file itself. It's more likely you'll need to split logic further down in your leaf nodes.

当您确实需要编写平台特定代码时，您可以使用 Platform 模块内联执行此操作.

When you do need to write platform specific code, you can do so inline using the Platform module.

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

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

或 Platform.select

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

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

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

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

which you can also use to select the proper component...

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

<Component />;

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

The last example could be accomplished via file naming convention as well. For instance, if you have the following two component files...

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

并且在您的文件中，您只需要 Component 这样...

and in your file you just require Component as such...

import Component from './Component';

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

And the bundler will import the proper component based on the .ios or .android bit.

这篇关于拥有 index.ios.js 而不仅仅是 index.js 的优势的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！