react-navigation / react-navigation/react-navigation.github.io

Documentation for web use is confusing and/or incomplete

Đang mở
#531 0 bình luận 7 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Ngôn ngữ chính
JavaScript
Star
324
Fork
2k
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

  1. 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?
  2. 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?
  3. The package names are confusing and I couldn't find any clarification. There's react-navigation @react-navigation/core, @react-navigation/web and a bunch of others on NPM with no indication that I could find of what the difference between them is. The @react-navigation packages 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?
  4. How does using the packages in the example @react-navigation/core and @react-navigation/web work alongside "normal" react-navigation in 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.
  5. Are there TS definitions for the @react-navigation packages?

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.

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với tài liệu hỗ trợ web tại reactnavigation.org/docs/en/web-support.html và xem xét các ví dụ về package được tham chiếu trong issue. Làm rõ react-native-web liên quan như thế nào đến Expo và các công cụ web tiêu chuẩn, phân biệt các package điều hướng và khả năng hỗ trợ TypeScript, đồng thời ghi lại cấu hình được khuyến nghị. Được xem là hoàn thành khi các câu hỏi được liệt kê đã được trả lời mà không yêu cầu người đọc phải tìm kiếm trên các repository khác.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react, react-native
Lĩnh vực
documentation, mobile-dev, web-dev
Loại issue
Tài liệu
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.