尝试编辑“React Native init”文件结构答案

【问题标题】：Trying to edit "React Native init" file structure尝试编辑“React Native init”文件结构
【发布时间】：2017-08-25 10:48:25
【问题描述】：

我最近决定从 Cordova 切换到 React Native。

我一直在尝试了解容器和组件文件应如何在 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找到。

然后我收到以下错误：

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

【问题讨论】：

标签： javascript android react-native compilation react-native-android

【解决方案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 - 完全由你决定！

【讨论】：

感谢@jevakallio 的详细回答。非常有帮助。

【解决方案2】：

您的文件正在尝试在第 48 行导出 App，但该行不存在。你已经在第 10 行有 export default class LearnD，所以省略第 48 行，这应该会有所帮助

【讨论】：