У меня есть навигационный ящик, у которого есть динамический список категорий, когда мы нажимаем на любую категорию, он открывает экран категорий с определенным идентификатором. Теперь, когда я впервые нажимаю на категорию, он загружает данные, но в следующий раз не будетзагружать данные или не вносить никаких изменений, и если я использую 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'
}
});