如何在 React Native 中使用 index.js 而不是 (index.ios.js, index.android.js) 进行跨平台应用程序？答案

【问题标题】：How to use index.js instead of (index.ios.js, index.android.js) in React Native for cross-platform app?如何在 React Native 中使用 index.js 而不是 (index.ios.js, index.android.js) 进行跨平台应用程序？
【发布时间】：2017-12-01 21:19:41
【问题描述】：

感谢您从现在开始的回答，

我是 React Native 的新手，我想做一个跨平台的应用，所以我创建了 index.js：

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

class ReactApp extends Component {

    render() {
        return (
            <View><Text>Hello world</Text></View>
        );
    }
}

module.exports = ReactApp;

然后我像这样从 index.ios.js 和 index.android.js 导入 index.js：

import { AppRegistry } from 'react-native';
import ReactApp from './index';

AppRegistry.registerComponent('ReactApp', () => ReactApp);

我认为在此之后它应该可以工作，但我明白了错误：

【问题讨论】：

请重命名索引文件并重试
您的图像不工作。此外，您没有说明您这样做是为了达到什么目的。
@MichaelCheng 图像工作我想因为我也在我的手机上试过，我想做一个跨平台的应用程序
@ravi.p 怎么样？为什么？
用这个替换 index.js 中的第一行并尝试 import React, {Component} from 'react';

标签： javascript android ios react-native cross-platform

【解决方案1】：

在 React v0.49 之后，您不再需要 index.ios.js 和 index.android.js。你只需要index.js:

import {AppRegistry} from 'react-native';
import App from './app/App';

AppRegistry.registerComponent('appMobile', () => App);

（将appMobile 替换为您的应用名称）

来源：(https://github.com/facebook/react-native/releases/tag/v0.49.0)

从现在开始，新项目只有一个入口点 (index.js)

【讨论】：

那是我一直在寻找的，因为我使用过其他版本（旧版本）并且我看到了 2 个不同的文件，但是从 0.49 开始，您将在创建应用程序后获得一个文件。跨度>
如果你想升级你的 RN 版本，请检查facebook.github.io/react-native/docs/upgrading.html（react-native-git-upgrade 应该像魅力一样工作）
新的 react-native 还能使用 2 个文件吗？
我不这么认为
问题解释：github.com/facebook/react-native/issues/…

【解决方案2】：

你正在倒退。 index.ios.js 和 index.android.js 将始终是默认 react-native init 项目中的单独入口点。如果你想让它们通过index.js 运行相同的代码库，你应该将其设置为index.ios.js 和index.android.js 导入index.js 并注册与index.js 中定义的相同的基本组件。

例如，您可以在example ToDo app (Github repo here) 中查看它是如何完成的。

如果你把index.js放在你的根目录下，不直接引用它会和index.android.js和index.ios.js冲突。因此，您需要指出导入的确切路径。请参阅下面的代码。

index.ios.js 和 index.android.js（内容相同）

import React from 'react';
import { AppRegistry } from 'react-native'
import ReactApp from './index.js'
// Had you placed index.js in another folder like `./app`, you could instead do your import with this shorthand:
// import ReactApp from './app'

AppRegistry.registerComponent('ReactApp', () => ReactApp)

index.js

// Note: I noticed that you imported Component from the wrong place. That might also be contributing to your issue so I fixed it here.
import React, { Component } from 'react';
import {
    View,
    Text,
} from 'react-native';

// Unless you are exporting multiple things from a single file, you should just use this.
// It's more idiomatic than using module.exports = ReactApp;
export default class ReactApp extends Component {
    render() {
        return (
            <View><Text>Hello world</Text></View>
        );
    }
}

【讨论】：

我复制并粘贴了你的代码，但我得到了同样的错误：-/，
@davutdev 立即尝试编辑。我错过了 React 的导入，因为我很快就把答案放在了一起。您仍然需要在所有三个文件中使用它。此外，如果您将index.js 与以index.something 开头的其他文件放在同一目录中，则意识到速记./index 导入将产生命名冲突。如果您使用另一个文件名或将其放在其他地方，那将不是问题。我在答案中添加了 cmets 来解释它。我刚才也在一个全新的项目中测试了这个，所以如果仍然有任何错误，那一定是来自其他地方。

【解决方案3】：

在 iOS AppDelegate.m 中改变这个

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

到

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

【讨论】：