web-dev-qa-db-ja.com

（index.ios.js、index.Android.js）の代わりにindex.jsを使用する方法Reactクロスプラットフォームアプリのネイティブ？

今から答えてくれてありがとう、

私は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);

私はこの後うまくいくと思うが、このエラーが出る：

enter image description here

javascriptandroidiosreact-nativecross-platform
16
davut dev

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. ）

新しいプロジェクトには、これからは単一のエントリポイント（index.js）があります

35
Floris M

これについては逆方向に進んでいます。 index.ios.jsとindex.Android.jsは、常にデフォルトのreact-native initプロジェクトの個別のエントリポイントになります。 index.jsを介して同じコードベースを実行したい場合は、index.ios.jsとindex.Android.jsをセットアップしてindex.jsをインポートし、index.jsで定義されているのと同じ基本コンポーネントを登録する必要があります。

たとえば、この ToDoアプリの例 （ Githubリポジトリ ）でどのように実行されるかを見ることができます。

ルートフォルダーに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>
        );
    }
}
7
Michael Cheng

IOS AppDelegate.mでこれを変更します

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

に

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