React native Paper上的菜单项抛出错误

3xiyfsfu  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(115)

我试图添加标题右导航到我的标题选项,下面是我的代码

App.js

import { MD3LightTheme as DefaultTheme,PaperProvider } from 'react-native-paper';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  import  HomeScreen  from './screens/Home/index';
  import RegisterScreen  from './screens/Register/index';
  import ForgotPasswordScreen from './screens/ForgotPassword';
  import SetPasswordScreen from './screens/SetPassword';
  import DashboardScreen from './screens/Dashboard';
  import HeaderMenu from './components/HeaderMenu';


  const Stack = createNativeStackNavigator();

  const theme = {
    ...DefaultTheme,
    // Specify custom property
    myOwnProperty: true,
      ...DefaultTheme.colors,
    // Specify custom property in nested object
    colors: {
      error: '#B22D1D',
      primary: '#0a4b7c',
      success: '#357a38'
    },
  };

  const headerMenuOptions = {
    headerRight: () => ( <HeaderMenu /> )}

  export default function App() {
    return (
      <PaperProvider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" options={{headerShown:false}} component={HomeScreen} />
          <Stack.Screen name="Register" component={RegisterScreen} />
          <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
          <Stack.Screen name="SetPassword" component={SetPasswordScreen} />
          <Stack.Screen name="Dashboard" options={headerMenuOptions}  component={DashboardScreen} />
        </Stack.Navigator>
      </NavigationContainer>
      </PaperProvider>
    );
  }

HeaderMenu.js

import * as React from "react";
    import { View } from "react-native";
    import { Button, Menu, Divider, PaperProvider } from "react-native-paper";

    function HeaderMenu() {
    const [visible, setVisible] = React.useState(true);

    const openMenu = () => setVisible(true);

    const closeMenu = () => setVisible(false);

    return (
        <View
        style={{
        
        }}
        >
        <Menu
            visible={visible}
            onDismiss={closeMenu}
            anchor={<Button onPress={openMenu}>Show menu</Button>}
        >
            <Menu.Item onPress={() => {}} title="Item 1" />
            <Menu.Item onPress={() => {}} title="Item 2" />
            <Divider />
            <Menu.Item onPress={() => {}} title="Item 3" />
        </Menu>
        </View>
    );
    };

    export default HeaderMenu;

复制自https://callstack.github.io/react-native-paper/docs/components/Menu/
我得到下面的错误

ERROR  TypeError: Cannot read property 'level2' of undefined

This error is located at:
    in Menu
    in ThemedComponent (created by withTheme(Menu))
    in withTheme(Menu) (created by HeaderMenu)
    in RCTView (created by View)
    in View (created by HeaderMenu)
    in HeaderMenu (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
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    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 PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in ThemeProvider (created by PaperProvider)
    in RCTView (created by View)
    in View (created by Portal.Host)
    in Portal.Host (created by PaperProvider)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by PaperProvider)
    in PaperProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
WARN  Possible Unhandled Promise Rejection (id: 7):
TypeError: Cannot read property 'level2' of undefined
TypeError: Cannot read property 'level2' of undefined

我没有尝试任何新的东西,只是复制粘贴代码。预计它会起作用。我是一个新手React本地文件,所以让我知道我错过了什么。

zi8p0yeb

zi8p0yeb1#

colors对象中缺少...DefaultTheme.colors

const theme = {
    ...DefaultTheme,
    // Specify custom property
    myOwnProperty: true,
    // Specify custom property in nested object
    colors: {
       ...DefaultTheme.colors,
      error: '#B22D1D',
      primary: '#0a4b7c',
      success: '#357a38'
    },
  };

相关问题