React Native Drawer Навигатор реквизит не определено - PullRequest
Новая
       6

React Native Drawer Навигатор реквизит не определено

0 голосов
/ 09 ноября 2018

Я пытаюсь создать навигатор ящиков, я думаю, что я все делаю правильно, но я получаю эту ошибку, когда пытаюсь открыть ящик не определенным, это не объект (оценка _this2.props.navigation.navigate '). Я сделал несколько журналов консоли и обнаружил, что this.props пуст для каждого класса, включая класс в App.js, даже после регистрации экранов. Может кто-нибудь помочь или посмотреть, если это действительно ошибка?

Заранее спасибо

Как воспроизвести

App.js 

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
import Home1 from './home';
// You can import from local files
import AssetExample from './components/AssetExample';
import Nav from './nav';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';

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

  render() {
    console.log(this.props);
    return (
      <View style={styles.container}>
        <Home1 {...this.props} />
      </View>
    );
  }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: StatusBar.currentHeight,
        backgroundColor: '#FFF',
    },
    innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    header: { padding: 15, paddingTop: 22 },
});

home.js 

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';

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

  static navigationOptions = {
    drawerLabel: 'Home'
  };
  render() {
    return (
      <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <View style={styles.header}>
      <TouchableOpacity
    onPress={() => {
              console.log(this.props); 
              console.log(this.props.navigation); 
    this.props.navigation.navigate('DrawerToggle');}}>
        <Icon name="md-menu" size={30} />
    </TouchableOpacity>
                </View>
        <Text> 'hi' </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: StatusBar.currentHeight,
        backgroundColor: '#FFF',
    },
    innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    header: { padding: 15, paddingTop: 22 },
});

screen.js 

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';

export default class Map extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }
  static navigationOptions = {
    drawerLabel: 'Map'
  };

  render() {
    return (
      <View>
      <StatusBar barStyle="dark-content" />
      <View style={styles.header}>
       <TouchableOpacity
    onPress={() => {
              console.log(this.props); 
              console.log(this.props.navigation); 
    this.props.navigation.navigate('DrawerToggle');}}>

    <Icon name="md-menu" size={30} />
    </TouchableOpacity>
         <Text> 'hello' </Text>
      </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: StatusBar.currentHeight,
        backgroundColor: '#FFF',
    },
    innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    header: { padding: 15, paddingTop: 22 },
});

nav.js 

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
import Home1 from './home';
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';

const Nav = createDrawerNavigator({
  Home: {
    screen: Home1
  },
  Map: {
    screen: Map
  },
 });

 export default Nav;

Ваше окружение

«реактивная бумага»: «2.1.3», «реактивная навигация»: «2.18.2»

Запуск кода онлайн здесь https://snack.expo.io/

1 Ответ

0 голосов
/ 09 ноября 2018

navigation.navigate('DrawerToggle') был удален в v2. Вы можете использовать 

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

, чтобы открыть и закрыть ящик соответственно. Пожалуйста, обратитесь к https://reactnavigation.org/docs/en/drawer-based-navigation.html

...