this.props.navigation未定義

我使用庫與react-navigation，我也可以滑動抽屜。this.props.navigation未定義

現在我想設置一個按鈕可以打開抽屜，但我發現我的this.props.navigation是從console.log(this.props.navigation)未定義。

因此，這將導致不確定的錯誤，如果我嘗試使用

<Button transparent onPress={() => 
    {this.props.navigation.navigate('DrawerOpen')}> 
    <Icon name='menu' /> 
</Button>

如何解決這個錯誤嗎？任何幫助，將不勝感激。

我創造我的抽屜裏有這樣的組件：

import React, { Component } from 'react'; 
    import { Image, ScrollView } from 'react-native'; 
    import { DrawerNavigator, DrawerItems } from 'react-navigation'; 
    import PageOne from './PageOne'; 
    import PageTwo from './PageTwo'; 


    class MyDrawer extends Component { 

     render() { 

      const TheDrawer = DrawerNavigator({ 
       PageOne: { 
        screen: PageOne, 
        navigationOptions: { 
         drawerLabel: 'It\s page One', 
         drawerIcon:() => (
          <Image source={require('../img/nav_icon_home.png')} /> 
         ), 
        }, 
       }, 

       PageTwo: { 
        screen: PageTwo, 
        navigationOptions: { 
         drawerLabel: 'It\'s page Two', 
         drawerIcon:() => (
          <Image source={require('../img/nav_icon_home.png')} /> 
         ), 
        }, 
       }, 
      }, { 
        drawerWidth: 300, 
        contentComponent: props => <ScrollView> 
         <DrawerItems {...props} 
          activeTintColor='#008080' 
          activeBackgroundColor='#EEE8AA' 
          inactiveTintColor='#20B2AA' 
          inactiveBackgroundColor='#F5F5DC' 
          style={{ backgroundColor: '#F5F5DC' }} 
          labelStyle={{ color: '#20B2AA' }} 
         /> 
        </ScrollView> 
       }); 

      return (
       <TheDrawer /> 
      ); 
     } 

}; 

export default MyDrawer;

使用MyDrawer在App.js：（未定義的錯誤是在這裏）

import React from 'react'; 
import { StyleSheet, View, Image } from 'react-native'; 
import { TabNavigator, DrawerNavigator } from 'react-navigation'; 
import MyDrawer from './screens/MyDrawer'; 

import { Container, Header, Button, Text, Icon, Left, Right, Title, Body } from 'native-base'; 

//style={[styles.icon, { tintColor: tintColor }]} 
export default class App extends React.Component { 

    render() { 
    // it shows undefined 
    console.log(this.props.navigation); 

    return (
     <Container> 
     <Header> 
      <Left> 
      <Button transparent onPress={() => { alert('test') }}> 
       <Icon name='menu' /> 
      </Button> 
      </Left> 
      <Body> 
      <Title>I am Title Man</Title> 
      </Body> 
      <Right /> 
     </Header> 
     <MyDrawer /> 
     </Container> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
});

來源

2017-07-14 徐博俊

爲了控制應用程序組件TheDrawer導航，您需要將TheDrawer的ref存儲到服務中，並從該服務派遣操作。

class MyDrawer extends Component { 
    // ... 

    render(): { 
    //... 

    return (
     <TheDrawer 
     ref={navigatorRef => { 
      NavigatorService.setContainer(navigatorRef); 
     }} 
     /> 
    ); 
    } 
}

然後用NavigatorService.navigate('DrawerOpen')打開抽屜。有關更多詳細信息，您可以看到this

來源

2017-07-14 05:13:12 ufxmeng

感謝您的回覆，請問從'./services/navigator';'import navigatorService在哪裏？我只是導入它，不需要創建任何代碼？ –

您只需要打開[鏈接]（https://github.com/react-community/react-navigation/issues/1439#issuecomment-303661539）並將鏈接中的代碼複製到navigator.js – ufxmeng

謝謝，我會嘗試。 –

this.props.navigation未定義

回答

相關問題