Question

我来自Ionic 2，我在那里编写了一次代码，它随处可见。

根据此页面https://facebook.github.io/react-native/docs/platform-specific-code.html＆＃34;在构建跨平台应用时，您希望尽可能多地重复使用代码。＆＃34;

我怎样才能重复使用＆＃34;在ReactNative中跨iOS和Android的代码？在入门应用程序中，我看到两个文件：index.ios.js和index.android.js。有没有像我可以用来跨平台共享的index.js？

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

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

我错过了什么？

谢谢！

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 导入该主文件，并以root用户身份注册 Main 组件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 组件。

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

如果您需要使用特定于平台的组件，则可以使用平台检测登录来执行此操作：

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

或

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

跨平台React Native文件结构

1 个答案: