javascript - 尝试编辑 "React Native init"文件结构

Question

我一直在尝试了解 React Native，因为我最近决定从 Cordova 切换到它。

我一直在尝试了解如何在 src 内正确构建容器和组件文件以便正确构建。

为此，我一直在尝试从新文件“app.js”中运行初始index.android.js 代码，该文件是我在原始/src/main 文件夹中找到的名为 js 的文件夹中创建的。

这是索引文件代码

/*Both index files index.ios.js and index.android.js MUST be indentical*/
var React= require('react-native');
var { AppRegistry } = React;
var App = require('./android/app/src/main/js/app.js')
AppRegistry.registerComponent('LearnD', () => LearnD);

app.js 文件可以在这里找到 gist here .

然后我收到以下错误:

任何帮助将不胜感激。 提前致谢， jack 。

Answer 1

React Native 应用程序的典型设置如下所示:

└── YourApp
    ├── android           # Native Android files, no .js here
    ├── index.android.js  # Android entry point, must exist
    ├── index.ios.js      # iOS entry point, must exist
    ├── ios               # Native iOS files, no .js here
    └── src               # All your .js sources
        ├── components    # All your .js sources
        └── main.js       # Your shared entry point

然后，您的 src/main.js 可以为两个平台导出单个共享入口点组件，并使用 src/ 目录中的其他组件:

// src/main.js
import React, { Component } from 'react';
import { View } from 'react-native';
import OtherComponent from './components/other-component.js'

// note export default
export default class Main extends Component {
  render() {
    return (
      <View>
        <OtherComponent />
      </View>
    );
  }
}

您的 index.ios.js 和 index.android.js 组件可以导入并注册主组件作为应用程序根组件:

// index.ios.js and index.android.js
// both must exist, but they can be identical
import { AppRegistry } from 'react-native';
import Main from './src/main';

AppRegistry.registerComponent('YourApp', () => Main);

在 src 目录中，您可以按照您认为最合适的任何方式构建应用代码，例如src/components 和 src/containers - 完全取决于您!