Ошибка добавления кнопки заголовка React Native Navigation [Ошибка: текстовые строки должны отображаться в компоненте <Text>.]

Я создаю мобильное приложение с React Native в управляемом выставочном проекте и использую Реагировать на навигацию. Я использую навигацию Stack и навигацию Tabbar. У меня возникли проблемы с добавлением простой кнопки в заголовок экрана стека. Моя цель — добавить кнопку «Добавить» в правой части заголовка.

Я следил за React Navigation документация о том, как добавить эту кнопку, но это не сработало, я получаю эту ошибку:

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

Я добавил параметр headerRight в параметры Stack.Screen, как показано в документации, но он не работает, и я получаю указанную ошибку.

Кто-нибудь знает, как это исправить? Кто-нибудь сталкивался с такой же проблемой?

Вот связь моего репозитория git со всем проектом. Проблема связана с файлом PlaylistScreen.js в папке screens.

Вот рассматриваемый код:

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 изображение

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
47
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Эй, вы импортировали нативные веб-компоненты, которые не работают на мобильных устройствах. измените этот импорт в вашем PlaylistsScreen.js от

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

к

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

омг, спасибо, я изменил это, и теперь это работает! Благодарю вас! Он автоматически импортирует из этой библиотеки, не знаю почему, как будто я писал компонент Button, а автоматический импорт исходил из библиотеки "react-native-web", интересно... но спасибо!

flpmko 15.03.2022 21:57

Другие вопросы по теме