Переместите Навигатор Ящика в Компоненте - PullRequest
Новая
       13

Переместите Навигатор Ящика в Компоненте

0 голосов
/ 21 октября 2019

У меня есть навигатор в заголовке каждого экрана. В настоящее время все работает как положено. Вот код, который работает:

App.js 

import React, { Component } from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';

import { Platform, Dimensions } from "react-native";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";

import HomeScreen from "./screens/HomeScreen";
import LinksScreen from "./screens/LinksScreen";
import SettingsScreen from "./screens/SettingsScreen";
import MenuDrawer from "./components/MenuDrawer";

const WIDTH = Dimensions.get('window').width;

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

const DrawerConfig = {
  drawerWidth: WIDTH*0.83,
  contentComponent: ({ navigation }) => {
    return(<MenuDrawer navigation={navigation} />)
  },
  drawerPosition: 'right'
}

const AppNavigator = createDrawerNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Links: {
      screen: LinksScreen
    },
    Settings: {
      screen: SettingsScreen
    },
  },
  DrawerConfig
);

const AppContainer = createAppContainer(AppNavigator);

Кнопка меню 

import React from "react";
import { StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";

export default class MenuButton extends React.Component {
  render() {
    return (
      <Ionicons
        name= "md-menu"
        color="white"
        size={40}
        style={styles.menuIcon}
        onPress={() => this.props.navigation.toggleDrawer()}
      />
    )
  }
}

HomeScreen.js (фрагмент кода экрана, который работает) 

return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <AlertButton />
          <TextInput placeholder="Location" style={styles.searchBackground} />
          <ShareButton />
          <MenuButton style={styles.menubutton} navigation={this.props.navigation} />
        </ View >
          {isLoaded ? (
          <Forecast weatherName={description} temp={temperature} city={location} />
          ) : (
          <View style={styles.loadingContainer}><Text>Getting Weather</Text></View>
          )}

      </SafeAreaView>

НО, когда я перемещаю этот код в компонент прогнозирования, мне так нравится, Я получаю> TypeError: TypeError: undefined не является объектом (оценка 'this.props.navigation')

Я пытался найти учебники весь день. Я знаю, что это связано с тем, что я переместил его с HomeScreen на компонент Forecast. Я попробовал 100 вещей и просто не могу понять это. Спасибо

Forecast.js 

function Forecast({ temp, weatherName, city }) {
  //console.log(weatherName);
  return ( 
    <View style={styles.forecastContainer}> 

     <View style={styles.header}>
          <AlertButton />
          <TextInput placeholder="Location" style={styles.searchBackground} />
          <ShareButton />
          <MenuButton style={styles.menubutton} navigation={this.props.navigation} />
      </ View >

      <View style={styles.forecastTopContainer}>
        <View>
          <Text style={styles.quoteText} >{weatherCases[weatherName].quote}</Text>
        </View>
      </View>

      <View style={styles.forecastBottomContainer}>

        <View style={styles.forecastImageContainer}>
          <Text>IMAGE</Text>
        </View>
        <View style={styles.forecastTempContainer}>
          <Text>{city}</Text>
          <Text>{temp}°</Text>
          <Text>{weatherCases[weatherName].title}</Text>
          <Text>PERC</Text>
        </View>
      </View>
    </View>
  );
}
...