react-native - 如何加载具有不同参数的相同屏幕？

Question

我正在编写一个应用程序，这个应用程序只有一个屏幕，其中有一个来自 React 导航的抽屉。抽屉有一个类别列表，我希望当我单击其中一个类别时使用新的类别参数“重新加载”屏幕。

我是这样称呼导航的:

<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});但我收到一个错误:“推送不是一个函数”。试图创建一个“中间人”屏幕以使用正确的参数重定向回主页。但是它看起来很糟糕并且不会触发 componentDidMount。我迷路了。

解决方案是什么？

---

这是我肮脏的解决方案。它可以工作，但我不喜欢它。

在我的主屏幕中，我有一个强制重新渲染:

constructor(props) {
  super(props);

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

componentWillUnmount() {
  this.forceRerender;
}

我创建了一个“中间人”，他还需要一个 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

我将使用您的用户个人资料示例作为基础，因为它更直接。

drawerNavigator 没有“堆叠”屏幕的能力。因此，您需要将屏幕包裹在 stackNavigator 中。请注意，您必须使用 this.props.navigation.push() 才能将下一个屏幕添加到堆栈。

I have provided a working snack example here

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;