react-navigation / react-navigation/react-navigation.github.io
Documentation for web use is confusing and/or incomplete
Ninguém assumiu esta issue ainda.
- Linguagem predominante
- JavaScript
- Estrelas
- 324
- Forks
- 2k
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Descrição
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.
Guia de contribuição
Nenhum guia de contribuição indexado para este repositório
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Direção de pesquisa
Comece pela documentação de suporte à web em reactnavigation.org/docs/en/web-support.html e revise os exemplos de pacotes referenciados na issue. Esclareça como react-native-web se relaciona com o Expo e com as ferramentas web padrão, diferencie os pacotes de navegação e o suporte a TypeScript e documente a configuração recomendada. Está concluído quando as perguntas listadas estiverem respondidas sem exigir que os leitores pesquisem em outros repositórios.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- javascript, react, react-native
- Domínio
- documentation, mobile-dev, web-dev
- Tipo de issue
- Documentação
- Dificuldade
- 4/5
- Tempo estimado
- 3-5 dias
- Status de atividade
- Estagnada
- Clareza
- Precisa de esclarecimento
- Facilidade para iniciantes
- 25/100