跨平台的React Native文件结构

Question

我来自Ionic 2，那里我只需编写一次代码，就可以在任何地方运行。

根据这个页面https://facebook.github.io/react-native/docs/platform-specific-code.html，“在构建跨平台应用程序时，您将希望尽可能多地重用代码。”

在ReactNative中，我如何在iOS和Android之间“重用”代码？在初始应用程序中，我看到两个文件：index.ios.js和index.android.js。是否有像index.js这样的文件可供在各个平台之间共享？

似乎应该有一个可共享的文件，因为上面提到的网页还显示了如何使用Platform模块来检查所在的操作系统。

我知道有时需要在不同的平台上采取不同的行动，但是假设我的应用程序足够简单，并且我的代码在两个平台上完全相同，我是否必须从一个平台复制/粘贴到另一个平台？我如何将相同功能的代码拉入自己的文件中，以在两个平台上共享？

我错过了什么？

谢谢！

- Anthony Tietjen

Answer 1

这是您可以做的事情。创建一个文件，比如说 main.js，作为您的根页面。 main.js

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class Main extends Component {
  render() {
    return (
      <Text>Hello world! from both IOS and Android</Text>
    );
  }
}

现在在您的 index.android.js 和 index.ios.js 文件中导入主文件并使用 AppRegistry 将您的 Main 组件注册为根组件。

index.android.js 和 index.ios.js

import React from 'react';
import {
  AppRegistry
} from 'react-native';
import Main from './main';

AppRegistry.registerComponent('DemoApp', () => Main);

如果你运行 react-native run-android 和 react-native run-ios 命令，Main 组件将在两个平台上都被渲染出来。

所有没有 IOS 和 Android 后缀的组件都适用于两个平台。例如，Navigator 适用于 iOS 和 Android，但是 NavigatorIOS 只适用于 iOS。因此，你需要确保使用跨平台组件。

如果你需要使用特定于平台的组件，则可以使用平台检测逻辑 来实现：

import { Platform } from 'react-native';
if(Platform.OS === 'ios').....

或者

if(Platform.OS === 'android')...

- Tushar Khatiwada

---

完美。谢谢！ - Anthony Tietjen