Error adding React Native Navigation header button [Error: Text strings must be rendered within a <Text> component.]

Question

我正在一个 expo 管理的项目中使用 React Native 构建一个移动应用程序，我正在使用 React Navigation。我正在使用 Stack 导航和 Tabbar 导航。我在向 Stack 屏幕添加一个简单按钮时遇到问题 header。我的目标是在 header.

右侧添加一个 'add' 按钮

我按照 React Navigation documentation 了解如何添加此按钮，但它不起作用，我收到此错误：

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

我将 headerRight 选项添加到 Stack.Screen 选项中，如文档中所示，但它不起作用，我收到错误提示。

有谁知道如何解决这个问题？有人遇到同样的问题吗？

这是我的 git 整个项目的 link 回购。问题出在 screens 文件夹中的 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>

这就是我要添加 header 按钮的 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 虚拟设备的屏幕截图 image

Answer 1

您好，您导入的 native-web 组件无法在手机上运行 在 PlaylistsScreen.js 中更改此导入 来自

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

至

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