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

NavigationContainer: initialRouteName: Issue with TypeScript

未關閉
#1,285 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

主要語言
JavaScript
星號
324
分支
2k
PR 合併指標
30 天內沒有已合併 PR

描述

Summary

Following the documentation provided, I see that there is an issue when setting the property initialRouteName to the NavigationContainer tag.

Computer: Mac OS 14.1 (23B74)
Editor: VSCode using React Native Tools by Microsoft.

Description

package.json dependencies:

"dependencies": {
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.20",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0",
  },

App.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './views/Home'

const Stack = createNativeStackNavigator();

function App(): JSX.Element {
  return (
    <NavigationContainer initialRouteName="Home">
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

VSCode Error Popup:

Type '{ children: Element; initialRouteName: string; }' is not assignable to type 'IntrinsicAttributes & NavigationContainerProps & { theme?: Theme | undefined; linking?: LinkingOptions<RootParamList> | undefined; fallback?: ReactNode; documentTitle?: DocumentTitleOptions | undefined; onReady?: (() => void) | undefined; } & { ...; }'.
  Property 'initialRouteName' does not exist on type 'IntrinsicAttributes & NavigationContainerProps & { theme?: Theme | undefined; linking?: LinkingOptions<RootParamList> | undefined; fallback?: ReactNode; documentTitle?: DocumentTitleOptions | undefined; onReady?: (() => void) | undefined; } & { ...; }'.ts(2322)

Screenshot:

image

Acceptance Criteria

I was expecting no error would show up

貢獻指南

這個儲存庫沒有索引到貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

從連結的 Hello React Navigation 文件頁面開始,檢查使用 NavigationContainer 和 Stack.Navigator 的範例。使用所示的相依套件重現 TypeScript 錯誤,然後更新範例,讓文件中的路由設定能夠被接受且不再出現回報的錯誤。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
react-native, typescript
領域
documentation, mobile-dev
Issue 類型
缺陷
難度
2/5
預估耗時
1-3 小時
活躍度
停滯
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。