如何使用不同的参数加载同一屏幕？

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

有什么解决方案？

---

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

在主屏幕上，我有一个强制渲染器：

constructor(props) {
  super(props);

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

componentWillUnmount() {
  this.forceRerender;
}

我创建了一个“中间人”，他还需要一个渲染器，否则它只能工作一次：

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

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

抽屉式导航器不具有“堆叠”屏幕的功能。 因此，您需要将屏幕包装在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访问值