如何设置文件夹结构以分隔每个屏幕上的本机？

Question

我有一个问题是创建一个文件结构来分隔要使用的每个js UI代码

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

请参阅splash,js，它只是声明Navigation docs和Homescreen的代码而不告诉我们如何构建最佳结构文件夹/文件来创建ProfileScreen和Homescreen.js以及如何在ProfileScreen.js中处理这些UI代码

Answer 1

App.js

其中package.json有这个代码

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

像那样导入它：

{"name": "screens"}

Answer 2

这是一个很好的方式：

import Welcome from 'screens/Welcome'
.
.
.

回答“引用导航文档，它只是声明Homescreen和ProfileScreen的代码而不告诉我们如何构建最佳结构文件夹/文件来创建Homescreen.js和ProfileScreen.js以及如何在App.js中处理这些UI代码” ：

在

/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

，您将导入所有config/containers.js模块。然后使用containers配置StackNavigator，如下所示。

router.js

现在，您可以在容器

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 }
});

上渲染RootNav：

App/index.js

Answer 3

你可能需要看看这个

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

这与我曾经做过的事情类似。