在React Native中如何在示例应用程序中使用N个视图

佩德罗·穆朗(PedroMourão)

我对React Native有一些怀疑。我读了这个答案(如何在react-native中创建一个多页面的应用程序?),但我仍然有一点疑问:

  • 我在React Native App中使用Navigator来访问许多视图,但是我该如何处理N个组件?例如,如果我有5个不同的视图,我已经使用了before代码五次...和n次?
约翰·鲁德尔

在我的评论中更多。

代替这个

if (routeId === 'SplashPage') {
    return (
        <SplashPage
            navigator={navigator}/>
    );
}
if (routeId === 'LoginPage') {
    return (
        <LoginPage
            navigator={navigator}/>
    );
}

仅具有用于动态获取组件的哈希表。

const Component = VIEW_COMPONENTS[routeid];

所以你的代码看起来像这样

const VIEW_COMPONENTS = {
    'SplashPage': SplashPage,
    'LoginPage': LoginPage
};

renderScene = ( route, navigator ) => {
    const ViewComponent = VIEW_COMPONENTS[route.id];
    return <ViewComponent navigator={navigator}/>
}

任何其他屏幕都将是查找表的单行条目。我有一个带有40个屏幕的本机应用程序,它非常容易管理,就像这样

添加到此。您也可以从中提取更多内容。使每个视图都不关心它的使用位置或其下一个视图是什么。而是使所有这些成为您的查找对象的一部分。指定每个视图都可以显示的下一条路线。您可以传递所有其他信息,所有这些信息都是可配置的,并且您的屏幕可以在多个流程上重复使用!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在 React 应用程序中使用 Swift 视图控制器?

来自分类Dev

如何在React Native Android应用程序中使用JavaScriptCore

来自分类Dev

如何在React Native Expo中使用图库应用程序打开下载的照片?

来自分类Dev

如何在React Native上的Kill应用程序中检测到一个应用程序?

来自分类Dev

如何在整个应用程序中打开 React Native 的 XMPP 连接(使用 xmpp.js)?

来自分类Dev

如何在React Native应用程序中创建“为该应用程序评分”链接?

来自分类Dev

如何在React Native iOS应用程序中更新应用程序版本?

来自分类Dev

在现有iOS应用程序中使用React Native仅适用于某些视图

来自分类Dev

如何在react-native中更改应用程序的显示名称

来自分类Dev

如何在React-Native应用程序中处理对Firebase的异步调用?

来自分类Dev

如何在Android上的react-native应用程序中获取versionName?

来自分类Dev

如何在React Native中向应用程序根发出事件

来自分类Dev

如何在React Native Android中打开应用程序设置页面?

来自分类Dev

如何在React-Native应用程序中处理对Firebase的异步调用?

来自分类Dev

如何在React-native中访问已初始化的Firebase应用程序?

来自分类Dev

如何在 React Native 应用程序中显示 git-describe?

来自分类Dev

可下载内容如何在 iOS 的 react-native 应用程序中工作?

来自分类Dev

如何在 React Native 应用程序中修改 expo android styles.xml

来自分类Dev

如何在React Native中使用AnimatedCircularProgress正确放置视图

来自分类Dev

如何在Android设备上使用Node js后端运行React Native应用程序?

来自分类Dev

如何在以TypeScript(TSX)编写的React应用程序中使用Facebook Relay?

来自分类Dev

如何在Angular 6应用程序中使用React组件

来自分类Dev

在 React 应用程序中使用 ActiveMQ

来自分类Dev

我如何在React应用程序中向API发出一百万个以上的请求?

来自分类Dev

如何使用DrawerLayoutAndroid组件在react-native应用程序中构建抽屉?

来自分类Dev

调试React-Native应用程序时如何在Chrome devtools中查看React选项卡?

来自分类Dev

如何在React应用程序中禁用文件监视

来自分类Dev

如何在 React 应用程序中执行 Python 代码?

来自分类Dev

如何使用react-navigation在react-native android应用程序中单击按钮导航到不同的屏幕

Related 相关文章

  1. 1

    如何在 React 应用程序中使用 Swift 视图控制器?

  2. 2

    如何在React Native Android应用程序中使用JavaScriptCore

  3. 3

    如何在React Native Expo中使用图库应用程序打开下载的照片?

  4. 4

    如何在React Native上的Kill应用程序中检测到一个应用程序?

  5. 5

    如何在整个应用程序中打开 React Native 的 XMPP 连接(使用 xmpp.js)?

  6. 6

    如何在React Native应用程序中创建“为该应用程序评分”链接?

  7. 7

    如何在React Native iOS应用程序中更新应用程序版本?

  8. 8

    在现有iOS应用程序中使用React Native仅适用于某些视图

  9. 9

    如何在react-native中更改应用程序的显示名称

  10. 10

    如何在React-Native应用程序中处理对Firebase的异步调用?

  11. 11

    如何在Android上的react-native应用程序中获取versionName?

  12. 12

    如何在React Native中向应用程序根发出事件

  13. 13

    如何在React Native Android中打开应用程序设置页面?

  14. 14

    如何在React-Native应用程序中处理对Firebase的异步调用?

  15. 15

    如何在React-native中访问已初始化的Firebase应用程序?

  16. 16

    如何在 React Native 应用程序中显示 git-describe?

  17. 17

    可下载内容如何在 iOS 的 react-native 应用程序中工作?

  18. 18

    如何在 React Native 应用程序中修改 expo android styles.xml

  19. 19

    如何在React Native中使用AnimatedCircularProgress正确放置视图

  20. 20

    如何在Android设备上使用Node js后端运行React Native应用程序?

  21. 21

    如何在以TypeScript(TSX)编写的React应用程序中使用Facebook Relay?

  22. 22

    如何在Angular 6应用程序中使用React组件

  23. 23

    在 React 应用程序中使用 ActiveMQ

  24. 24

    我如何在React应用程序中向API发出一百万个以上的请求?

  25. 25

    如何使用DrawerLayoutAndroid组件在react-native应用程序中构建抽屉?

  26. 26

    调试React-Native应用程序时如何在Chrome devtools中查看React选项卡?

  27. 27

    如何在React应用程序中禁用文件监视

  28. 28

    如何在 React 应用程序中执行 Python 代码?

  29. 29

    如何使用react-navigation在react-native android应用程序中单击按钮导航到不同的屏幕

热门标签

归档