Ящик не перемещается к следующему экрану в React Native Navigation 5 - PullRequest
Новая
       102

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

0 голосов
/ 20 марта 2020

Я использую реагирующий родной ящик с навигацией 5, я создал ящик, но из ящика, когда я щелкаю некоторые из опций, чтобы перейти к следующему экрану, я получаю сообщение об ошибке типа «Не определено не является объектом .. this.props» и когда я определяю опору сверху, как 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>
    );
  }
  }

Ответы [ 2 ]

1 голос
/ 20 марта 2020

Вы должны передать 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>
  );
}
0 голосов
/ 20 марта 2020

Согласно документации , навигация реквизит должна по умолчанию передаваться в 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>
            );
        }
    }
...