react-navigation / react-navigation/react-navigation.github.io
Documentation for web use is confusing and/or incomplete
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 324
- Forks
- 2k
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
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.
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par la documentation sur la prise en charge du Web à l’adresse reactnavigation.org/docs/en/web-support.html et examinez les exemples de packages référencés dans l’issue. Clarifiez les liens entre react-native-web, Expo et les outils Web standard, distinguez les packages de navigation et la prise en charge de TypeScript, et documentez la configuration recommandée. Le travail est terminé lorsque les questions listées ont reçu une réponse sans obliger les lecteurs à effectuer des recherches dans d’autres repositories.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react, react-native
- Domaine
- documentation, mobile-dev, web-dev
- Type d'issue
- Documentation
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 25/100