使用抽屉导航时出错-未定义不是对象(正在评估'_this.props.navigationProps.toggleDrawer')

问题描述 投票:0回答:1

我在使抽屉式导航与NativeBase配合使用时遇到麻烦,它在另一个文件中也能正常工作,但是当将其添加到我正在处理的项目中时,出现此错误:未定义不是对象(正在评估'_this.props.navigationProps.toggleDrawer')]我看过几篇帖子,都出现了相同的错误,但对我却无济于事,我确定这是我犯的一个简单的JavaScript错误。

我已经从此文件中删除了很多内容,以压缩我在此处发布的内容,但这足以显示我的问题。

"react-native-navigation": "^2.27.9",
"react-native-reanimated": "1.2.0",
"react-native-screens": "1.0.0-alpha.22",
"react-native-vector-icons": "6.6.0",
"react-navigation": "4.0.7",
"react-navigation-drawer": "^2.2.2",
"react-navigation-stack": "1.8.1", 
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createDrawerNavigator } from "react-navigation-drawer";

import Screen1 from "./pages/Screen1";

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static navigationOptions = {
    header: null
  };

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };

  render() {
    return (
      <Container>
        <Header style={{ backgroundColor: "#000" }}>
          <Left style={{ flexDirection: "row" }}>
            <Icon
              //onPress={() =>this.props.navigationProps.toggleDrawer();}
              onPress={this.toggleDrawer.bind(this)}
              name="md-menu"
              style={{ color: "white", marginRight: 15 }}
            />
          </Left>
          <Body>
            <Title>Title</Title>
          </Body>
          <Right />
        </Header>

        <Content>
          <View>
            <Image
              source={require("../images/fileL.jpg")}
              style={{ height: 200, width: 200, flex: 1 }}
            />
          </View>

          <List>
            <ListItem onPress={() => this.props.navigation.navigate("Stuff")}>
              <Left>
                <Thumbnail square source={require("../images/file.jpg")} />
                <View
                  style={{
                    marginLeft: 15,
                    marginTop: 15,
                    justifyContent: "center",
                    flex: 1
                  }}
                >
                  <Text>Heading</Text>
                </View>
              </Left>
              <Right>
                <Icon name="arrow-forward" />
              </Right>
            </ListItem>
          </List>
        </Content>

        <Footer>
          <FooterTab style={{ backgroundColor: "#6B52AE" }}>
            <Button>
              <Grid>
                <Col>
                  <View
                    style={{
                      flex: 1,
                      alignItems: "center",
                      justifyContent: "center"
                    }}
                  >
                    <Text
                      style={{
                        color: "#FFF",
                        fontSize: 22,
                        fontWeight: "bold"
                      }}
                    >
                      TOTAL
                    </Text>
                  </View>
                </Col>
                <Col>
                  <View
                    style={{
                      flex: 1,
                      alignItems: "center",
                      justifyContent: "center"
                    }}
                  >
                    <Text
                      style={{
                        color: "#FFF",
                        fontSize: 16
                      }}
                    >
                      TEXT
                    </Text>
                  </View>
                </Col>
                <Col>
                  <View
                    style={{
                      flex: 1,
                      alignItems: "center",
                      justifyContent: "center"
                    }}
                  >
                    <Text style={{ color: "#FFF" }}>
                      <Icon style={{ color: "#FFF" }} name="arrow-forward" />
                    </Text>
                  </View>
                </Col>
              </Grid>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

class Stuff extends React.Component {
  static navigationOptions = {
    headerStyle: {
      backgroundColor: "#6B52AE"
    },
    headerTitle: "Stuff",
    headerTintColor: "#fff"
  };
  render() {
    return (
      <Container>
        <Content padder>
          <Grid />
        </Content>
      </Container>
    );
  }
}

const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: "Demo Screen 1",
      headerLeft: <HomeScreen navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: "#FF9800"
      },
      headerTintColor: "#fff"
    })
  }
});

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: "Demo Screen 2",
      headerLeft: <HomeScreen navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: "#FF9800"
      },
      headerTintColor: "#fff"
    })
  }
});

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: "Demo Screen 3",
      headerLeft: <HomeScreen navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: "#FF9800"
      },
      headerTintColor: "#fff"
    })
  }
});

const DrawerNavigator = createDrawerNavigator({
  Screen1: {
    //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: "Demo Screen 1"
    }
  }
});

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Stuff: Stuff
  },
  {
    initialRouteName: "Home"
  }
);

const AppContainer = createAppContainer(RootStack, DrawerNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

react-native react-navigation native-base react-navigation-stack react-navigation-drawer
1个回答
0
投票

您能尝试这个吗?

© www.soinside.com 2019 - 2024. All rights reserved.