react-navigation / react-navigation/react-navigation.github.io
Documentation for web use is confusing and/or incomplete
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 324
- 派生
- 2k
- PR 合并指标
- 30 天内没有已合并 PR
描述
I began exploring bringing my RN project to the web via react-native-web and quickly hit a stumbling block with react-navigation due to the confusing or incomplete documentation about web usage. I'm referring to the documentation here:
https://reactnavigation.org/docs/en/web-support.html
Specifically the following are/were points of confusion
- The "with react native web" section only mentions using expo. React-native-web seems to be the de-facto mechanism to bring RN projects to web in the community and I would guess that a lot (or most) projects don't use non-ejected expo. How does react navigation web support relate to react-native-web in general outside of the context of expo?
- The "with standard web tools" section isn't really clear about what "standard web tools" means in this context. It seems to refer to using react-native-web or a plain web browser with a bundler like webpack?
- The package names are confusing and I couldn't find any clarification. There's
react-navigation@react-navigation/core,@react-navigation/weband a bunch of others on NPM with no indication that I could find of what the difference between them is. The@react-navigationpackages seem to be lower/older versions but are recommended for web use in the docs. Which package is for which usage and which packages are old/deprecated? - How does using the packages in the example
@react-navigation/coreand@react-navigation/webwork alongside "normal"react-navigationin a react-native-web project? This appears to be missing entirely from the docs and I had to hack/find a solution across a lot of different issues in a bunch of repos. - Are there TS definitions for the
@react-navigationpackages?
Here's how I've ended up configuring my navigator but honestly I have no idea if this is the best/correct/compatible way to do it with react-native-web:
import { createSwitchNavigator } from "@react-navigation/core"
import { createAppContainer } from "react-navigation"
// import { createStackNavigator } from "react-navigation-stack"
import { createBrowserApp } from "@react-navigation/web"
import AuthScreen from "../screens/AuthScreen"
import HomeScreen from "../screens/HomeScreen"
import AuthLoadingScreen from "../screens/AuthLoadingScreen"
import Main from "../../Main"
import { Platform } from "react-native"
const AppStack = createSwitchNavigator({ Home: Main }, { headerMode: "none" })
const AuthStack = createSwitchNavigator({ SignIn: AuthScreen }, { headerMode: "none" })
let appNavigator = createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack
},
{
initialRouteName: "AuthLoading"
}
)
)
if (Platform.OS == "web") {
appNavigator = createBrowserApp(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack
},
{
initialRouteName: "AuthLoading"
}
)
)
}
export default appNavigator
Some clarification on if this is a good/acceptable approach would be appreciated. Once I figure out the answers to these questions myself perhaps I'll be able to submit a documentation PR to help others avoid this confusion.
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 reactnavigation.org/docs/en/web-support.html 的 Web 支持文档开始,并查看 issue 中引用的 package 示例。明确 react-native-web 与 Expo 及标准 Web 工具之间的关系,区分各导航 package 和 TypeScript 支持,并记录推荐的配置。当列出的问题都已得到解答,且不要求读者在其他 repository 中搜索时,即视为完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, react, react-native
- 领域
- documentation, mobile-dev, web-dev
- Issue 类型
- 文档
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 需要澄清
- 新手友好度
- 25/100