this.props.navigation.push не является функцией - PullRequest
0 голосов
/ 25 августа 2018

У меня есть навигационный ящик, у которого есть динамический список категорий, когда мы нажимаем на любую категорию, он открывает экран категорий с определенным идентификатором. Теперь, когда я впервые нажимаю на категорию, он загружает данные, но в следующий раз не будетзагружать данные или не вносить никаких изменений, и если я использую push-метод реагирования навигации, это выдаст мне ошибку

this.props.navigation.push('Category', {query: id})

Это даст мне push не работает, и когда я использую

this.props.navigation.navigate('Category', {query: id})

Данные экрана не обновляются. Не могли бы вы помочь мне, как это исправить? Я использую реагирующую навигацию

Файл My App.js

import React, { Component } from 'react';
import { SafeAreaView, ScrollView, AsyncStorage } from 'react-native';
import { Text } from 'native-base';
import { createSwitchNavigator, createStackNavigator, createDrawerNavigator, DrawerItems } from 'react-navigation';
import OneSignal from 'react-native-onesignal'; // Import package from node modules

import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';
import RegisterScreen from './screens/RegisterScreen';
import AuthLoadingScreen from './AuthLoadingScreen';
import SettingScreen from './screens/SettingScreen';
import CatalogInfoScreen from './screens/CatalogInfoScreen';
import ImageSlider from './screens/ImageSlider';
import CategoryScreen from './screens/CategoryScreen';
import NavigationMenu from './screens/NavigationMenu';

export default class App extends Component {

  constructor(props){
    super(props);

    this.onIds = this.onIds.bind(this);
    this.onOpened = this.onOpened.bind(this);
    this.onReceived = this.onReceived.bind(this);
  }

  componentWillMount() {
    OneSignal.init("MYAPPID");
    OneSignal.configure({});
    OneSignal.removeEventListener('ids', this.onIds);
    OneSignal.removeEventListener('opened', this.onOpened);
    OneSignal.removeEventListener('received', this.onReceived);

    OneSignal.addEventListener('received', this.onReceived);
    OneSignal.addEventListener('opened', this.onOpened);
    OneSignal.addEventListener('ids', this.onIds);
  }

  componentWillUnmount() {
      OneSignal.removeEventListener('received', this.onReceived);
      OneSignal.removeEventListener('opened', this.onOpened);
      OneSignal.removeEventListener('ids', this.onIds);
  }

  onReceived(notification) {
      console.log("Notification received: ", notification);
  }

  onOpened(openResult){
    console.log('Message: ', openResult.notification.payload.body);
    console.log('Data: ', openResult.notification.payload.additionalData, openResult.notification.payload.additionalData.catalog);
    console.log('isActive: ', openResult.notification.isAppInFocus);
    console.log('openResult: ', openResult);

    this.pushNotificationOpen(openResult);
  }

  pushNotificationOpen = (notifi) => {
    console.log("OPen screen ntf", notifi);
    //this.props.navigation.navigate('Setting');
  }

  onIds(device) {
    console.log('Device info: ', device, this.state);
    this.saveDeviceId(device);
  }

  saveDeviceId(id){
    console.log("inside device cusotm", id);
  }

  render() {
    return (
        <RootStack />
    );
  }
}

const NavigationScreen = createStackNavigator(
  {
      Login: LoginScreen,
      Register: RegisterScreen
  }
)

const CustomDrawerComp = (props) => (
  <SafeAreaView styles={{flex: 1}}>
    <ScrollView>
      {/* <DrawerItems {...props} /> */}
      <NavigationMenu {...props} />
    </ScrollView>
  </SafeAreaView>
)


const MainApp = createDrawerNavigator(
  {
      Home: HomeScreen,
      Setting: SettingScreen,
      CatalogInfo: CatalogInfoScreen,
      Slider: ImageSlider,
      Category: CategoryScreen
  },
  {
    initialRouteName: 'Home',
      contentComponent: CustomDrawerComp
  }
)

const RootStack = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: MainApp,
    Auth: NavigationScreen,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

Мой NavigationMenu.js

import React, { Component } from "react";
import { 
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import axios from 'axios';

class NavigationMenu extends Component {

    constructor(props){
        super(props);

        this.state ={
            menus: []
        }

    }

    componentWillMount() {  
        this.loadMenus()
    }

    _signOutAsync = async () => {
        await AsyncStorage.clear();
        this.props.navigation.navigate('Auth');
    };

    loadMenus(){
        const self = this;
        var loadData = {
            method: 'GET',
            url: `My_API_URL`,
            headers: {
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            json: true
        };
        axios(loadData)
        .then(function (response) {
            self.setState({menus: response.data.menus});
        })
        .catch(function (error) {
            //console.log(error);
        });
    }

    openCategory(id){
        console.log(id);
        //this.props.navigation.navigate('Category', {query: id})
        this.props.navigation.navigate ({ key: Math.random () * 10000, routeName: 'Category', params: {query: id} })
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('Home')}>
                    <Text style={styles.menuStyle}>Home</Text>
                </TouchableOpacity>
                {
                    this.state.menus.map((menu) => (
                        <TouchableOpacity key={menu.id} onPress={(id) => this.openCategory(menu.id)}>
                            <Text style={styles.menuStyle} key={menu.id}>{menu.name}</Text>
                        </TouchableOpacity>
                    ))  
                }

                <TouchableOpacity onPress={() => this.props.navigation.navigate('Setting')}>
                    <Text style={styles.menuStyle}>Setting</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
export default NavigationMenu;

const styles = StyleSheet.create({
    menuStyle: {
      padding: 16,
      fontSize: 16,
      fontWeight: 'bold'
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...