Documentation for web use is confusing and/or incomplete
Ninguém assumiu esta issue ainda.
Avaliação
- Dificuldade
- 4/5
- Tempo estimado
- 3-5 dias
- Facilidade para iniciantes
- 25/100
- Tipo de issue
- Documentação
- Clareza
- Precisa de esclarecimento
- Status de atividade
- Estagnada
- Stack de tecnologia
- javascript, react, react-native
- Domínio
- documentation, mobile-dev, web-dev
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.
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.
- Linguagem predominante
- JavaScript
- Estrelas
- 324
- Forks
- 2k
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
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.
Mais de react-navigation/react-navigation.github.io
-
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 94/100
react-navigation/react-navigation.github.io#1516 · 1 comentário ·
-
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 90/100
-
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 72/100
-
Dificuldade 1/5 1-3 horas Facilidade para iniciantes 68/100
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 72/100
Todas as issues de react-navigation/react-navigation.github.io
Issues semelhantes
-
Dificuldade 1/5 1-3 horas Facilidade para iniciantes 78/100
Mintplex-Labs/anything-llm#6490 ·
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 86/100
-
[quality] workflow-scripts guard reads test:unit:coverage as skipping the unit suite, blocking #632 Abertaagent/quality hive/hosted-available-lke648397-260827-5n31 quality testing
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 86/100
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 72/100
-
area-clientside-dartpad
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 62/100