Я создаю мобильное приложение с 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 изображение
Эй, вы импортировали нативные веб-компоненты, которые не работают на мобильных устройствах. измените этот импорт в вашем PlaylistsScreen.js от
import { Button, Text, View } from "react-native-web";
к
import { Button, Text, View } from "react-native";
омг, спасибо, я изменил это, и теперь это работает! Благодарю вас! Он автоматически импортирует из этой библиотеки, не знаю почему, как будто я писал компонент Button, а автоматический импорт исходил из библиотеки "react-native-web", интересно... но спасибо!