React-Native-Navigation，如何在通过 navigation.navigate("routename", {randomparams}) 导航到路线时刷新路线

Question

我有一个 bottomTabNavigator，它有两个 stacknavigator。每个 stacknavigator 都有自己各自的屏幕。每当我使用

之类的东西时

navigator.navigate("Stackname" {screen:"screenname", randomProp: "seomthing")

参数被发送到 stacknavigator，而不是屏幕本身。我通过传递

来解决这个问题

initialParams=route.params

在 stacknavigators 中，但是当我第二次调用第一个代码块时它们不会刷新。有任何想法吗？

Answer 1

那是因为屏幕已经挂载且初始参数不会更新。不过，您可以做的是创建一个包装器组件，该包装器组件使用 'react-native-navigation' 提供的 'withNavigationFocus' 进行了增强。

https://reactnavigation.org/docs/1.x/with-navigation-focus/

ComponentWithFocus

import React, {Component, useState} from 'react';
import { withNavigationFocus } from 'react-navigation';

const ComponentWithFocus = (props) => {
  const {isFocused, onFocus, onBlur} = props;
  const [focused, setFocused] = useState(false);

  if(isFocused !== focused) {
    if(isFocused) {
      typeof onFocus === 'function' ? onFocus() : null;
      setFocused(true)
    } else {
      typeof onBlur === 'function' ? onBlur() : null;
      setFocused(false)
    }
  }
  return (
    props.children
  )
}

export default withNavigationFocus(ComponentWithFocus);

然后像这样在你的屏幕上使用它：

...
onFocus = () => {
 //your param fetch here and data get/set
 this.props.navigation.getParam('param')
 //get
 //set
}

...
render() {
 <ComponentWithFocus onFocus={this.onFocus}>
   /// Your regular view JSX
 </ComponentWithFocus>
}

注意：如果参数仍未更新，那么您应该重新考虑您的导航方法。例如，无需像这样从 tabBar 导航：

navigator.navigate("Stackname" {screen:"screenname", randomProp: "seomthing")

您可以改为执行以下操作：

navigator.navigate("screenName", {'paramPropKey': 'paramPropValue'})

这将起作用，因为“.navigate”函数会找到与名称匹配的第一个可用屏幕，如果尚未安装，则会将其安装到堆栈上（触发 componentDidMount 方法）。如果屏幕已经存在，它只是导航到它，忽略 'componentDidMount' 但传递 'isFocused' 属性，幸运的是，我们在 'ComponentWithFocus'.

希望这对您有所帮助。

Answer 2

而不是：

navigator.navigate("StackName" {screen:"screenName", paramPropKey: "paramPropValue");

使用这个：

navigator.navigate("screenName", {'paramPropKey': 'paramPropValue'});

在屏幕名称中：

export default ({route}) => {
   useEffect(() => {
      // do something
   }, [route]);
};

React-Native-Navigation，如何在通过 navigation.navigate("routename", {randomparams}) 导航到路线时刷新路线

React-Native-Navigation, how to refresh a route when navigating to it via navigation.navigate("routename", {randomparams})

javascript

react-native

react-native-navigation