web-dev-qa-db-ja.com

未定義になることは、_this.props.navigationを評価するオブジェクトではありません

DrawerNavigatorを使用しており、3つのページがあります：Router page、mainScreen、およびphotos page、
ヘッダーnavbar領域を作成し、この<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>を使用してmainScreenでDrawerメニューを開き、写真ページでもメニューを使用できますが、写真ページで<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;

mainScreen：

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>

        )
    }
}
react-nativereact-navigation
19
Sedric Heidarizarei

おそらく何かを見落としているかもしれませんが、単純なJavascriptエラーのように見えます。純粋なコンポーネントMyNavScreenで小道具を破壊しています：

const MyNavScreen = ({ navigation }) => (

これは、this.propsにアクセスできないことを意味します。破壊されたプロップnavigationにアクセスするだけです。したがって、これは実際には未定義であるため、未定義エラーの理由は次のとおりです。

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

代わりにnavigationを直接使用するように変更すると、動作するはずです。

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

mainScreenでは、構造化されていない引数を持つ純粋なコンポーネントではないので問題ありません。したがって、render()のthis.propsに引き続きアクセスできます。

これが問題を引き起こしている場合は、 破壊 をブラッシュアップする必要があります。

13
Michael Cheng

これが私のために働いたバインディング

私の場合、コンストラクターでthis itを呼び出すメソッドに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');
}

式関数を使用している間、独自のスコープを作成するためです。

11
bereket gebredingle

子要素でTouchableOpacity/Heightを使用する場合、次のようにthis.props.onPressを渡します。

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

次に、次のように親コンポーネントでonPress関数を呼び出します。

<Parent onPress={this.Handlepress} />
7
Kevin Kiwango

子コンポーネントでナビゲーションを使用している場合、小道具のナビゲーションを子に送信することを忘れないでください

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

このような子コンポーネントでのアクセス

    props.navigation.navigate("ScreenName")
7
Sumedh Ulhe

これを試して：

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

5
sai teja

これがReact Navigation 2リリースでの方法です。StackNavigatorの子ナビゲーターであるDrawerNavigatorからopenDrawer()メソッドを呼び出します。

これは私の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>)
        })
2
Ahmad Wahaj

ヘッダーコンポーネントを使用していたときに同じ問題が発生しました

これで、このような他のコンポーネントでナビゲーション変数を使用できます

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

ハッピーコディング:)

1
MedElmaachi

機能コンポーネントは、引数として小道具を取ります。これを試してみてください

const MyNavScreen = ({props}) =>

そして、このキーワードなしで小道具を呼び出します

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

同じ問題が発生しました。それが私がそれを解決した方法です：

  1. すべてのコンストラクタに「props」に引数があることを確認します
  2. 次のように、コンストラクターで関数this.props.navigation.navigateを使用して関数をバインドします：this.your_function = this.your_function.bind(this)
0
Jonathan Kashongwe

createStackNavigatorで画面を定義すると、デフォルトでは、ナビゲーションと呼ばれる小道具が渡されます。これは次のようなものです=> navigation={this.props.navigation}

ただし、this.props.navigation.navigator("YOUR SCREEN ")を使用し、createStackNavigatorでこの画面を定義しなかった場合は、createStackNavigatorで定義した画面からnavigation={this.props.navigation}を渡す必要があり、コンポーネントで使用できます。

0
Ali Dehghan