Как загрузить тот же экран с другим параметром?

Question

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

Вот как я называю навигацию:

<Drawer.Item
  label={category.name}
  key={category.id}
  active={global.activeCategory == category.id}
  onPress={() => {
    this.props.navigation.navigate('Home', {category: category.id});
    this.props.navigation.closeDrawer();
  }}
/>

Это не работает, но я не знаю, так ли это, потому что мы не можем вызвать навигацию на экране, на котором мы уже работаем, или потому, что экран уже был вызван, поэтому он не запускает снова мой componentDidMount ();

Вот мой componentDidMount для получения содержимого:

async componentDidMount() {
  const paramCategory = this.props.navigation.getParam('category', 0);
  console.log(paramCategory);
  this.getJokes(this.state.category, 1); // category id + page number
};

Я пытался использовать this.props.navigation.push ('Home', {category: category.id});но я получил ошибку: «push - это не функция».Попытался создать экран "посредник", чтобы перенаправить обратно на главную с правильным параметром.Но он выглядит плохо и не вызывает componentDidMount.Я заблудился.

В чем решение?

---

Вот мой грязный грязный раствор.Это работает, но мне это не нравится.

На моем главном экране у меня есть Rerender:

constructor(props) {
  super(props);

  this.forceRerender = this.props.navigation.addListener('willFocus', () => {
    this.getJokes(this.props.navigation.getParam('category', 0));
  });
}

componentWillUnmount() {
  this.forceRerender;
}

И я создал "Middleman", которому нужен также Rerender, иначе егоработать только один раз:

class Middleman extends React.Component {

  componentDidMount() {
    const paramCategory = this.props.navigation.getParam('category', 0);
    this.props.navigation.navigate('Home', {category: paramCategory});
  };

  constructor(props) {
    super(props);

    this.forceRerender = this.props.navigation.addListener('willFocus', () => {
      const paramCategory = this.props.navigation.getParam('category', 0);
      this.props.navigation.navigate('Home', {category: paramCategory});
    });
  }

  componentWillUnmount() {
    this.forceRerender;
  }

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

Answer 1

Я буду использовать пример вашего профиля пользователя в качестве основы, поскольку он более понятен.

hookNavigator не имеет возможности "складывать" экраны.Поэтому вам нужно обернуть ваш экран в stackNavigator.Обратите внимание, что вы должны использовать this.props.navigation.push (), чтобы добавить следующий экран в стек.

Я привел здесь рабочий пример закуски

import React from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation'; // Version can be specified in package.json

class UserScreen extends React.Component {

  renderListOfUsers = () => {
    const users = ['User 1', 'User 2', 'User 3'];

    return users.map(u => (
       <Button
          onPress={() => this.props.navigation.push('User', {userName: u})}
          title={`Go to ${u}`}
        />
    ));
  }; 

  render() {
    const userName = this.props.navigation.getParam('userName', 'none');

    return (
      <View style={{flex:1}}>
        <Button
          onPress={() => this.props.navigation.toggleDrawer()}
          title="Open Drawer"
        />
        <Text>Active user: {userName}</Text>

        {this.renderListOfUsers()}

      </View>
    );
  }
}

const UserStack = createStackNavigator({
  User: {
    screen: UserScreen
  }
})

const MyDrawerNavigator = createDrawerNavigator({
  User: {
    screen: UserStack,
  },
});

const MyApp = createAppContainer(MyDrawerNavigator);

export default MyApp;

Answer 2

Я использую следующее для stacknavigator, idk, если он работает в навигаторе ящиков, но вы должны попробовать

var Stack= createStackNavigator(
  {
    Main: {screen: ({ navigation }) => (<MainScreen navigation={navigation} value="Dogs" />)},
    Search:{screen: ({ navigation }) => (<Search navigation={navigation} value="Dogs" />)},
 Details:{screen: ({ navigation }) => (<Details navigation={navigation} value="Dogs" />)}
  },
  {
      // initialRouteName: 'Main',
    headerMode: 'none',

  }
);

, а в другом стеке у меня есть один с кошками, но те же экраны.Я просто получить доступ к значению this.props.value