添加ReactNativeNavigation標題按鈕時出錯[錯誤：必須在<Text>組件中呈現文本字串。]-有解無憂

我正在一個 expo 托管專案中使用 React Native 構建一個移動應用程式，并且我正在使用React Navigation。我正在使用 Stack 導航和 Tabbar 導航。我無法在堆疊螢屏標題中添加一個簡單的按鈕。我的目標是在標題右側添加一個“添加”按鈕。

我按照 React Navigation檔案介紹了如何添加此按鈕，但它不起作用，我收到此錯誤：

Error: Text strings must be rendered within a <Text> component.

我將 headerRight 選項添加到 Stack.Screen 選項中，如檔案中所示，但它不起作用，并且我得到了提到的錯誤。

有誰知道如何解決這一問題？有沒有人遇到過同樣的問題？

這是我的 git repo 與整個專案的鏈接。問題在于螢屏檔案夾中的 PlaylistScreen.js 檔案。

這是有問題的代碼：

const PlaylistsScreen = () => {
  const Stack = createNativeStackNavigator();
  return (
        <Stack.Navigator>
          <Stack.Screen
            name="PlaylistList"
            component={PlaylistList}
            options={{
              headerTitle: "Playlisty",
              headerRight: () => (
               <Button
                 onPress={() => alert('This is a button!')}
                 title="Info"
                 color="#fff"
               />
             ),
            }}
          />
        </Stack.Navigator>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我也試過這個，導致同樣的錯誤：

const PlaylistsScreen = () => {
  const Stack = createNativeStackNavigator();
  return (
        <Stack.Navigator>
          <Stack.Screen
            name="PlaylistList"
            component={PlaylistList}
            options={{
              headerTitle: "Playlisty",
              headerRight: () => (
                <View>
                  <Text>{"right"}</Text>
                </View>
              ),
            }}
          />
        </Stack.Navigator>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

這是我的導航結構：

<NavigationContainer>
   <Tab.Navigator>
      <Tab.Screen/>
   </Tab.Navigator>
</NavigationContainer>

Tab.Screen 包含一個帶有 Stack.Navigator 的組件，如下所示：

<Stack.Navigator>
  <Stack.Screen/>
</Stack.Navigator>

這就是我試圖添加標題按鈕的 Stack.Screen 。

這是完整的錯誤：

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in div (created by Text)
    in Text (created by HeaderConfig)
    in div (created by View)
    in View (created by HeaderConfig)
    in RNSScreenStackHeaderSubview (created by ScreenStackHeaderRightView)
    in ScreenStackHeaderRightView (created by HeaderConfig)
    in RNSScreenStackHeaderConfig (created by HeaderConfig)
    in HeaderConfig (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by PlaylistsScreen)
    in PlaylistsScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenNavigationContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by Navigation)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Navigation)
    in Navigation (created by App)
    in ThemeProvider (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

這是來自 Android 虛擬設備映像的螢屏截圖

uj5u.com熱心網友回復：

嘿，您正在匯入在移動設備上不起作用的本機網路組件，將 PlaylistsScreen.js 中的此匯入更改為

import { Button, Text, View } from "react-native-web";

到

import { Button, Text, View } from "react-native";

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445039.html

標籤：反应式反应导航反应原生导航反应导航堆栈反应导航底部选项卡

上一篇：FirebasePromise回傳未定義的資料Javascript

下一篇：React，我想在函式中列印出一個物件