导航器只能包含“Screen”、“Group”或“React.Fragment”作为其直接子级

2024-01-27

<Stack.Navigator>
  {
    isLogin ? <ComponentA /> :  <ComponentB />
  }
</Stack.Navigator>


const ComponentA = () => (
 arrA.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

const ComponentB = () => (
 arrB.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

我想在组件A和组件B中使用一些钩子,所以我必须将它们用作功能组件,请问有什么帮助吗?

源代码 https://github.com/react-navigation/react-navigation/blob/1179d56c5008270753feef41acdc1dbd2191efcf/packages/core/src/useNavigationBuilder.tsx#L104


一个选项可能是内联渲染组件:

<Stack.Navigator>
  {
    isLogin ? ComponentA({}) :  ComponentB({})
  }
</Stack.Navigator>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

导航器只能包含“Screen”、“Group”或“React.Fragment”作为其直接子级 的相关文章

  • React-hook-form 文本字段的条件验证,基于是否选中另一个复选框?

    我正在尝试向文本字段添加验证规则 如果选中表单中的单独复选框 则该字段必须是非空字符串才能提交表单 这是我到目前为止所拥有的内容的链接 https codesandbox io s magical hypatia n7o5w https c
  • 在react-router转换期间我应该如何更新redux存储?

    我面临着如何在发生反应路由器转换时更新存储的问题 在我当前的实现中 如下 在渲染下一页之前更新存储 当当前页面根据下一页的数据获取商店更新时 就会出现问题 1 当前页面毫无意义地呈现 它订阅了商店更新 因为更新的商店是针对下一页的 2 当前
  • 使用输入更新 redux 状态

    如何从文本输入更新 redux 状态 我正在尝试用文本输入做一个非常简单的 Hello World 当有人在文本输入中输入内容时 它应该更新我商店的 searchTerm 值 我无法弄清楚这些事情 1 如何获取输入的值并将其传递到其 onC
  • 样式组件如何影响性能?

    使用样式组件是否比样式表更会降低 Web 应用程序的速度 如果我关心性能并且没有任何依赖于 props 的样式 我是否应该放弃样式组件并使用样式表 当您有很多小组件时 同时使用样式化组件渲染 性能开销可能会很有意义 绝对值得测试以删除小元素
  • 生成日期并将新属性添加到对象数组中

    我无法控制数据列表 但我需要将其映射到日期范围数据 数据列表如下所示 只有 from 和 to date from 2017 05 06 00 00 00 date to 2017 05 08 23 59 59 state name San
  • 表单提交 ReactJS 时出现“类型错误:尝试获取资源时出现网络错误”

    我尝试在启用跨源的情况下从 API 获取一些数据 但收到此错误 同样的事情与JSON占位符 https jsonplaceholder typicode com 用于测试的在线 REST API 使用他们提供的示例 fetch https
  • 反应模式 shouldCloseOnOverlayClick 不起作用

    我正在使用反应模式 点击叠加层后模式不会关闭 我为 isOpen 和 onRequestClose 提供了属性 但模式保持打开状态 closeModal gt this setState modalIsOpen false
  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr
  • 删除某些屏幕的顶部导航栏

    有没有办法仅删除特定屏幕的顶部导航栏 我正在使用反应导航 我已经尝试过以下操作 header visible false 但它只隐藏导航栏 导航栏的空间仍然无法使用 提前致谢 我用headerShown像这样标记 import React
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • Nextjs 无法在生产环境中的“.next”目录中找到有效的构建

    我正在 docker 中运行我的应用程序 但我的生产构建和启动脚本仅在 docker 环境中失败 虽然node env开发在docker环境下运行良好 这是我的脚本 无法进行生产构建并启动服务器 我正在使用nodemon和babel bui
  • 渲染作为 Prop 传入的 Component

    我怎样才能渲染一个StyledComponent它是作为道具传入的吗 我正在传递一个Spinner组件到我的BarComponent作为渲染的道具 我尝试使用 this props icon in my BarComponent在下面的示例
  • 提及列表和表情符号顶部位置 (Draft.js)

    您能帮我如何将其位置从下到上更改吗 我想在文本顶部而不是底部显示提及列表 关于表情符号列表的同样问题 示例链接 https www draft js plugins com plugin emoji 你可以通过以下方式实现它position
  • React Native 弹出菜单移动选项框

    我有一个 React Native 弹出菜单 实现如下 import React Component from react import Text from react native import Icon Divider from rea
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • 如何从 Chrome React Dev Tools 打开 VS code 中的组件文件?

    是否可以右键单击 React Dev 工具下可见的组件 然后单击 在 IDE 中显示 从而在 VSCode 中打开该文件 这将是有益的 因为我不必去寻找该组件 我经常想在 VS Code 中查看某个组件的源代码 但由于组件的模块化复用 代码
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np

随机推荐