Question

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

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

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

Answer 1

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

其中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

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

在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 native folder structure

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

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

3 个答案: