不要在渲染期间定义组件。React 将在每次渲染时看到一个新的组件类型，并销毁整个子树的 DOM 节点和状态

Question

在下面的代码中，我进入第 1 行，有人可以告诉我解释以及我应该更改什么吗

<Drawer.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: colorPalette.blue1, height: 80 },
    headerTintColor: "white",
    // headerLeft: () => <View></View>
    headerTitle: () => <Image source={appLogo} />, // line 1
    headerRight: () => <HeaderRight />,
  }}
  drawerContent={(props) => (
    <DrawerContent navigation={navigation} {...props}></DrawerContent>
  )}
>

我想在其中渲染一个组件？

Answer 1

我解决了同样的问题，<CustomDrawerContent />在其父组件（DrawerMenuNavigator）之外声明组件，如下所示：

    function CustomDrawerContent(props: DrawerContentComponentProps) {
      return (
        <DrawerContentScrollView {...props}>
          <DrawerItemList {...props} />
        </DrawerContentScrollView>
      );
    }
    
    const Drawer = createDrawerNavigator<DrawerNavigationProps>();
    
    const DrawerMenuNavigator = ({}) => {
      return (
        <Drawer.Navigator
          drawerContent={CustomDrawerContent}
          initialRouteName={DRAWER_MENU_NAVIGATOR.DASHBOARD_NAVIGATOR}
          screenOptions={{headerShown: false, drawerStyle: styles.drawer}}>
          <Drawer.Screen
            component={DashboardNavigator}
            name={DRAWER_MENU_NAVIGATOR.DASHBOARD_NAVIGATOR}
          />
        </Drawer.Navigator>
      );
    };


/**EDITED: Passing props eg. colors from `useTheme()` hook */

    function CustomDrawerContent(props: (DrawerContentComponentProps & CustomColorsProps)) {
      return (
        <DrawerContentScrollView {...props}>
          <DrawerItemList {...props} />
        </DrawerContentScrollView>
      );
    }
    
    const Drawer = createDrawerNavigator<DrawerNavigationProps>();
    const {colors} = useTheme();
    
    const DrawerMenuNavigator = ({}) => {
      return (
        <Drawer.Navigator
          drawerContent={CustomDrawerContent}
          initialRouteName={DRAWER_MENU_NAVIGATOR.DASHBOARD_NAVIGATOR}
          screenOptions={{headerShown: false, drawerStyle: styles.drawer}}>
          <Drawer.Screen
            component={(props) => DashboardNavigator({...props, ...colors})}
            name={DRAWER_MENU_NAVIGATOR.DASHBOARD_NAVIGATOR}
          />
        </Drawer.Navigator>
      );
    };