Question

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

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

我从this question看到甚至有混合应用程序同时使用单个文件和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 specific code时，可以使用Platform模块进行内联。

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

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

或Platform.select

从＆＃39; react-native＆＃39;;

导入{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位导入适当的组件。

Answer 2

拥有iOS和Android文件的整个想法是处理需要在Android和iOS中以不同方式编写的代码。例如，React Native中的Picker组件在iOS和Android中的工作方式不同。通过拆分代码，您可以轻松地拆分代码并维护它们。运行时，React Native将根据运行该应用程序的平台自动查找要使用的文件。

来源：https://facebook.github.io/react-native/releases/0.26/docs/platform-specific-code.html

Answer 3

某些组件在ios和Android之间并不通用。

在设置方面，创建react native应用程序让初学者保持简单并开始使用。在设置更复杂的视图时，您会发现需要为ios和Android提供单独的视图。

如果您的应用程序结构良好，您可以将逻辑拆分为一个文件，然后为ios，Android甚至Web提供单独的视图。基本上为3个平台编写1个应用程序。

Answer 4

index.js将在两个平台上运行。 index.ios.js仅在iOS设备上运行，index.android.js仅在Android设备上运行。

如果您的视图在两个设备上都看起来相同，并且您在两个平台上以相同方式运行的任何依赖项都跳过平台说明符。

但是，如果视图在两个平台上看起来有点不同（或许在两个平台上遵循不同的设计标准），或者您需要在两个平台上使用不同的依赖关系，那么您需要使用说明符。

通过让某些组件只是.js而其他组件为.io.js或.android.js，它允许您尽可能合并代码，同时仍然可以在需要时进行特定于平台的选择。

应该注意的是，平台说明符可以用在任何组件上，而不仅仅是索引文件。（即您可以在MyCoolButton.js和MyRegularButton.android.js`两个平台上使用MyRegularButton.ios.js，它们将自动在相应的平台上使用。）

Answer 5

如果您将看到此回购https://github.com/react-community/create-react-native-app，您将知道create-react-native-app是Expo产品。您在Expo服务器上编译的所有应用程序以及位于那里的index.android.js和index.ios.js。

如果要修改平台文件，则需要运行

npm run eject

之后，您将获得一个包含所有依赖项的原始react本机项目（npm，cocoapods，react-native modules），当然还有index.android.js和index.ios.js

Answer 6

React Native组件将移植到他们的平台，所以是的，您可以在index.js中构建所有内容，并且在大多数情况下都可以。

如果您有某些样式或使用仅具有平台特定功能的某些组件，您可以使用.ios或.android标记来帮助它，以便将该脚手架放在那里。

除了React Native指南之外，还有可用于简单内容的平台模块，如果您的代码太复杂，它会提到在文件上使用ios和android标记。

https://facebook.github.io/react-native/docs/platform-specific-code.html

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

6 个答案: