React native 未定义this.props.navigation_React Native_React Navigation

React native 未定义this.props.navigation

react-native

React native 未定义this.props.navigation,react-native,react-navigation,React Native,React Navigation,我使用带有react导航的库，还可以滑动抽屉现在我想设置一个可以打开抽屉的按钮，但是我发现我的this.props.navigation没有从console.logthis.props.navigation定义因此，如果我尝试使用 <Button transparent onPress={() => {this.props.navigation.navigate('DrawerOpen')}> <Icon name='menu' /> </B

我使用带有react导航的库，还可以滑动抽屉

现在我想设置一个可以打开抽屉的按钮，但是我发现我的this.props.navigation没有从console.logthis.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;

在App.js中使用MyDrawer：未定义的错误在这里

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',
  },
});

要从应用组件控制Drawer navigator，您需要将Drawer的ref存储到服务，并从该服务分派操作

class MyDrawer extends Component {
  // ...

  render(): {
    //...

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

然后使用NavigatorService。导航“DrawerRopen”打开抽屉。有关更多详细信息，请参见

谢谢您的回复，我可以问一下导入导航器服务从哪里来。/services/navigator'？我是否只导入它而不需要创建任何代码？您只需要打开并将代码从链接复制到navigator.js谢谢，我会尝试一下。