跨平台 React Native 文件结构 [英] Cross-platform React Native file structure

问题描述

我来自 Ionic 2，在那里我编写了一次代码，它可以在任何地方运行.

I'm coming from Ionic 2 where I write my code once, and it runs everywhere.

根据此页面 https://facebook.github.io/react-native/docs/platform-specific-code.html 在构建跨平台应用程序时，您需要尽可能多地重复使用代码."

According to this page https://facebook.github.io/react-native/docs/platform-specific-code.html "When building a cross-platform app, you'll want to re-use as much code as possible."

如何在 ReactNative 中跨 iOS 和 Android重用"代码?在入门应用程序中，我看到两个文件:index.ios.js 和 index.android.js.是否有类似 index.js 之类的东西可以用于跨平台共享?

How can I "reuse" code across iOS and Android in ReactNative? In the starter app I see two files: index.ios.js and index.android.js. Is there something like index.js that I can use for sharing across platforms?

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

It seems like there should be one file for shareable code, since that web page mentioned above also shows how you can use the Platform module to check what OS you are on.

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

I realize that sometimes you need different behavior on different platforms, but, assuming that my app is simple enough, and my code ends up exactly the same on both platforms, do I have to copy/paste from one to the other? How can I pull same-functionality into it’s own file to be shared on both platforms?

我错过了什么?

谢谢！

推荐答案

这是您可以执行的操作.创建一个文件，比如 ma​​in.js，它将作为您的根页面.

Here's what you can do. Create a file say main.js that will act as your root page.

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

Now on your index.android.js and index.ios.js import that main file and register your Main component as root using 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 组件将在两个平台上渲染.

if you run react-native run-android and react-native run-ios the Main component will be rendered for both the platforms.

带有 No IOS 和 Android 后缀的所有组件都适用于两个平台.就像 Navigator 对 ios 和 android 都有效，但 NavigatorIOS 只对 ios 有效.因此，您必须确保使用的是跨平台组件.

All of the Components with No IOS and Android suffix works for both platforms. Like Navigator works for both ios and android but NavigatorIOS works only for ios. So you'll have to make sure that you're using the cross platform components.

如果您需要使用平台特定的组件，那么您可以使用平台检测登录来实现:

If you need to use platform specific components, then you can use platform detection login to do so:

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

或

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

这篇关于跨平台 React Native 文件结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！