Ящик не переходит к следующему экрану в React Native Navigation 5

Я использую собственный ящик реакции с навигацией 5, я создал ящик, но из ящика, когда я нажимаю какой-либо параметр для перехода к следующему экрану, он выдает мне ошибку, например «Неопределенный объект .. this.props», и когда я определяю prop вверху, как const navigation = this.props.navigation, тогда появляется ошибка «Навигация не определена ...» Это мой ящик, в котором размещается мой контент:

export function DrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <View
        style={
          styles.drawerContent
        }
      >
        <View style={styles.userInfoSection}>
          <Avatar.Image
...            
/>
        </View>
        <Drawer.Section style={styles.drawerSection}>
          <DrawerItem
            label="Preferences"
            onPress={() => {}}
          />
          <DrawerItem
            label="Classes"
            onPress={() => this.props.navigation.navigate('ClassHome')} //Over Here I want to navigation
          />
        </Drawer.Section>
      </View>
    </DrawerContentScrollView>
  );
}

И вот где я разместил свои экраны ящиков:

import * as React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import ClassHome from './ClassHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
    render(){
    return (
        <Drawer.Navigator drawerContent={() => <DrawerContent navigation = {this.props.navigation} />}>
        <Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
        <Drawer.Screen name="ClassHome" component={ClassHome} />
      </Drawer.Navigator>
    );
  }
  }

react-native react-native-navigation react-navigation-drawer react-navigation-v5 react-native-drawer
person Talha Nadeem    schedule 20.03.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны передать props из drawerContent в свой DrawerContent, как показано ниже:

import * as React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import ClassHome from './ClassHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
  render(){
    return (
        <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props}/>}> {/* pass props here */}
        <Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
        <Drawer.Screen name="ClassHome" component={ClassHome} />
      </Drawer.Navigator>
    );
  }
}

Теперь вы можете использовать эти реквизиты непосредственно в своем пользовательском компоненте:

export function DrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <View
        style={
          styles.drawerContent
        }
      >
        <View style={styles.userInfoSection}>
          <Avatar.Image
...            
/>
        </View>
        <Drawer.Section style={styles.drawerSection}>
          <DrawerItem
            label="Preferences"
            onPress={() => {}}
          />
          <DrawerItem
            label="Classes"
            onPress={() => props.navigation.navigate('ClassHome')} // user props here
          />
        </Drawer.Section>
      </View>
    </DrawerContentScrollView>
  );
}
person Kishan Bharda    schedule 20.03.2020
comment
В нем говорится, что props не определен, но в любом случае я нашел решение, сделав свой DrawerContent классом, потому что пропсы, переданные в нем, исходили из классов, которые мои, это давало мне ошибку. - person Talha Nadeem; 20.03.2020

arrow_upward
0
arrow_downward

Согласно документации, навигация свойство по умолчанию должно передаваться в DrawerContent. Я бы порекомендовал сделать это так:

    import * as React from 'react';
    import { createDrawerNavigator } from '@react-navigation/drawer';
    import HomeTimeTable from './HomeTimeTable';
    import {DrawerContent} from './DrawerContent';
    import ClassHome from './ClassHome';
    const Drawer = createDrawerNavigator();
    export default class DrawerScreens extends React.Component {
        render(){
            return (
               <Drawer.Navigator drawerContent={DrawerContent}>
                   <Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
                   <Drawer.Screen name="ClassHome" component={ClassHome} />
               </Drawer.Navigator>
            );
        }
    }
person Hoby Herisata    schedule 20.03.2020
comment
Проблема заключается в моей функции DrawerContent. - person Talha Nadeem; 20.03.2020
comment
Не могли бы вы предоставить пример репозитория, чтобы я мог его запустить? - person Hoby Herisata; 20.03.2020
comment
Я нашел решение, сделав свой DrawerContent классом, потому что пропсы, переданные в нем, исходили из классов, которые были у меня, это давало мне ошибку. Спасибо - person Talha Nadeem; 20.03.2020