Получение undefined не является объектом, оценивающим _this.props.navigation

Я использую DrawerNavigator и у меня есть 3 страницы: Router page, В mainScreen и photos page,
Я сделал область заголовка панели навигации, и я использовал This <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> чтобы открыть меню Drawer в mainScreen, и использовал это также для страницы с фотографиями, меню в порядке в mainScreen, но когда я нажимаю <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> на странице фотографий, я получаю эту ошибку: Photo
Как я могу это исправить?

Страница моих фотографий:

import React from 'react';
import { Button, ScrollView, View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/FontAwesome'

const MyNavScreen = ({ navigation }) => (
  <View>
    <View style={styles.containerNavbar}>
      <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
        <Icon name="bars" size={30} color="#fff" />
      </TouchableHighlight>
      <Text style={styles.navbarTitle}>Photos</Text>
    </View>

    <ScrollView>
      <View><Text>photo</Text></View>
      <Button onPress={() => navigation.goBack(null)} title="Go back" />
    </ScrollView>
  </View>
);

const MyPhotosHomeScreen = ({ navigation }) => (
  <MyNavScreen navigation={navigation} />
);
MyPhotosHomeScreen.navigationOptions = {
  title: 'Photos',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons
      name="photo"
      size={24}
      style={{ color: tintColor }}
    />
  ),
};
export default MyPhotosHomeScreen;

главный экран:

export default class MainScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <MaterialIcons
                name="home"
                size={24}
                style={{ color: tintColor }}
            />
        )
    };

    render() {
        return (
            <View>
                <View style={styles.containerNavbar}>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
                        <Icon name="bars" size={30} color="#fff" />
                    </TouchableHighlight>
                    <Text style={styles.navbarTitle}>mainScreen</Text>
                </View>

                <View>
                    <View style={styles.containerFooter}>
                        <Text style={styles.footerTitle}>Footer</Text>
                    </View>
                </View>
            </View>

        )
    }
}

Ответ 1

Возможно, я что-то упускаю, но это просто похоже на простую ошибку Javascript. Вы уничтожаете свои реквизиты в чистом компоненте MyNavScreen:

const MyNavScreen = ({ navigation }) => (

Это означает, что у вас нет доступа к this.props. У вас просто есть доступ к деструктурированной опоре navigation. Следовательно, причина неопределенной ошибки, так как она на самом деле не определена:

<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>

Если вы измените его, чтобы использовать navigation напрямую, он должен работать:

<TouchableHighlight onPress={() => navigation.navigate('DrawerOpen')}>

На mainScreen вас все хорошо, потому что это не чистый компонент с неструктурированными аргументами. Таким образом, у вас все еще есть доступ к this.props в render().

Вы должны освежить разрушение, если это вызывает у вас проблемы.

Ответ 2

Привязка это работало для меня

В моем случае это сработало, когда я связал this с методом, который вызывает prop в конструкторе.

constructor(props){
    super(props);
    this.showDetails = this.showDetails.bind(this);// you should bind this to the method that call the props
}

showDetails(_id){
    this.props.navigation.navigate('Details');
}

Или просто используйте функцию стрелки

showDetails = (_id) => {
      this.props.navigation.navigate('Details');
}

потому что пока вы используете функцию выражения, она собирается создать собственную область видимости.

Ответ 3

Если вы используете TouchableOpacity/Height в дочернем элементе, передайте его this.props.onPress следующим образом:

<TouchableOpacity onPress={this.props.onPress}/>

Затем вызовите функцию onPress в родительском компоненте следующим образом:

<Parent onPress={this.Handlepress} />

Ответ 4

Если вы используете навигацию в дочернем компоненте, не забудьте отправить навигацию в подпорке дочернему компоненту

    <ChildComponent navigation={this.props.navigation}/>

Доступ в дочернем компоненте, как это

    props.navigation.navigate("ScreenName")

Ответ 5

Попробуйте это:

import { withNavigation } from 'react-navigation';

withNavigation обслуживает реквизиты по всему проекту/приложению, вы получаете доступ к навигационным реквизитам из любого места.

и

onPress={() => this.props.navigation.navigate('DrawerOpen')} 

Наконец,

export default withNavigation(MyPhotosHomeScreen);

проверить это https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Ответ 6

Вот как я это сделал в выпуске React Navigation 2: я вызываю метод openDrawer() из StackNavigator который является дочерним навигатором DrawerNavigator.

Это мой DrawerNavigator:

export const Drawer = DrawerNavigator(
    {
        MyAccount: {screen: TabsStack},
    });


export const TabsStack = StackNavigator({

    Tabs: {
        screen: Tabs, navigationOptions: ({navigation}) => ({
            headerLeft: (
                <TouchableOpacity style={{marginLeft: 10, marginTop: 3}}
                                  onPress={() => navigation.openDrawer()}>
                    <Image source={require('./assets/menu_h.png')}/>
                </TouchableOpacity>)
        })

Ответ 7

у меня была такая же проблема, когда я использовал компонент заголовка

Теперь вы можете использовать переменную навигации в другом компоненте, как это

<TouchableOpacity onPress={() => { this.props.navigation.navigate("Play");}}>

Удачной Коддинга :)

Ответ 8

функциональные компоненты принимают в качестве аргумента реквизит. Вы должны попробовать это

const MyNavScreen = ({props}) =>

а затем вызвать реквизит без этого ключевого слова

onPress = {() => props.navigation.navigate('DrawerOpen')} 

Ответ 9

Я столкнулся с той же проблемой. Вот как я это решил:

  1. Убедитесь, что у всех ваших конструкторов есть "реквизит" и аргумент
  2. Свяжите функцию с помощью функции this.props.navigation.navigate в конструкторе следующим образом: this.your_function = this.your_function.bind(this)

Ответ 11

когда вы определили экран в createStackNavigator, он по умолчанию передает реквизит, называемый навигацией, что-то вроде этого => navigation={this.props.navigation}

но когда вы используете this.props.navigation.navigator("YOUR SCREEN ") и не определили этот экран в createStackNavigator, вы должны передать navigation={this.props.navigation} из экрана, который вы определили в createStackNavigator, а затем можете использовать его в вашем компоненте.

Ответ 12

Класс ProductScreen расширяет компонент {

экспорт по умолчанию ProductScreen;//убедитесь, что внизу этой строки упоминается

Назовите это

  <TouchableOpacity
        onPress = {() => this.props.navigation.navigate('ProductAddScreen')}
        activeOpacity={0.7} style={styles.button}>

       <Text style={styles.message}>{this.state.notFound} </Text>

  </TouchableOpacity>