跨平台 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 的东西可以用来跨平台共享？

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

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

我错过了什么？

谢谢！

Answer 1

这是你可以做的。创建一个名为 ma​​in.js 的文件，作为您的根页面。

ma​​in.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 上导入该主文件并将您的 Main 组件注册为 root 使用AppRegistry.

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 组件将为这两个平台呈现。

No IOS 和 Android 后缀的所有组件都适用于这两个平台。像 Navigator 一样适用于 ios 和 android，但 NavigatorIOS 仅适用于 ios。因此，您必须确保您使用的是跨平台组件。

如果您需要使用平台特定的组件，那么您可以使用平台检测登录来做到这一点：

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

或

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