Ошибка при использовании навигации по ящикам - undefined не является объектом (оценка '_this.props.navigationProps.toggleDrawer') - PullRequest
Новая
       46

Ошибка при использовании навигации по ящикам - undefined не является объектом (оценка '_this.props.navigationProps.toggleDrawer')

0 голосов
/ 26 сентября 2019

У меня проблемы с получением навигации по ящикам для работы с NativeBase. Он хорошо работает в другом файле, но когда он добавлен в проект, над которым я работаю, я получаю эту ошибку: undefined не является объектом (оценка '_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 />;
  }
}

1 Ответ

0 голосов
/ 26 сентября 2019

Не могли бы вы попробовать это ?? 

import { DrawerActions } from 'react-navigation-drawer';
  render() {
      const { navigationProps } = this.props
    return (
   ...
            <Icon
              onPress={() => navigationProps.dispatch(DrawerActions.toggleDrawer())}
              name="md-menu"
              style={{ color: "white", marginRight: 15 }}
            />
...