Question

我使用带react-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;

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

Answer 1

要从App组件控制TheDrawer导航器，您需要将TheDrawer的ref存储到服务，并从该服务调度操作。

class MyDrawer extends Component {
  // ...

  render(): {
    //...

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

然后使用NavigatorService.navigate('DrawerOpen')打开抽屉。有关详细信息，请参阅this

this.props.navigation未定义

1 个答案: