如何设置文件夹结构以将React Antial上的每个屏幕分开

Question

我有一个问题来创建一个文件结构以将每个JS UI代码分开

我想知道如何创建welcome.js，login.js，splash,js的JS代码，并在需要时调用

请参阅导航文档，它只是声明Homescreen和ProfileScreen的代码，而无需告诉我们如何构建最佳的结构文件夹/文件以创建Homescreen.js和ProfileScreen.js，以及如何在App.js

中处理这些UI代码。

Answer 1

screens/
   index.js
   Welcome.js
   Login.js
   Splach.js
   package.json

where package.json具有此代码

{"name": "screens"}

这样的导入：

import Welcome from 'screens/Welcome'
.
.
.

Answer 2

这是一种很好的方法：

/android
/ios
/src
  /components
  /containers
      App/
          index.js
          styles.js
      Welcome/
          index.js
          styles.js
      Login/
          index.js
          styles.js
      Splash/
          index.js
          styles.js
  /config
      ...
      containers.js
      router.js
  /images
package.json
index.ios.js
index.android.js

回答"请参阅导航文档，它只是声明HomeScreen和profilesCreen的守则，而无需告诉我们如何构建最佳的结构文件夹/文件以创建homeScreen.js and profilescreen.js以及如何在应用程序中处理这些UI代码.js"：

在config/containers.js上，您将导入所有containers模块。然后使用 router.js像下面的stacknavigator配置。

import {
  StackNavigator
} from 'react-navigation';
import containers from './containers';
export const RootNav = StackNavigator({
  Splash: { screen: containers.Splash },
  Login: { screen: containers.Login },
  Home: { screen: containers.Welcome }
});

现在您可以在容器App/index.js上渲染rootnav：

render(
    return(
        <RootNav navigation={this.props.navigation} />
    )
)

Answer 3

您可能需要看看这个React本地文件夹结构

这与我做过的事情类似。