React-native：如何检测组件何时呈现/打开/在功能组件中答案

【问题标题】：React-native : How to detect when a component is rendered / open / un functionnal componentReact-native：如何检测组件何时呈现/打开/在功能组件中
【发布时间】：2021-06-23 00:04:38
【问题描述】：

也许这是一个愚蠢的问题，但我没有找到答案（我从 react-native 开始）。

我需要检测视图何时打开（在堆栈菜单中切换），我的视图是一个组件（函数）。如果我的视图打开了，我会在 redux 中启动一个简单的操作/调度。

我使用 react-native 路由器和 Redux 进行搜索，但没有找到解决方案。我使用功能组件进行搜索，但如果我使用 useMemo ( react )，则此方法会启动一次。每次显示组件都不是一次。

// my menu      

<Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
              tabBarLabel: 'Home',
              tabBarIcon: ({ color, focused  }) => (
                  <Icon name={'home'} size={20} color={focused ? '#6646ee' : "#fff"} />
              ),
              tabBarOptions: { activeTintColor:'black' }
          }}
      />

如果你有一个解决方案，也许很简单...... 感谢提前

更新：好的，我找到了一个解决方案来检测我是否点击了菜单

<Tab.Screen
              name="Home"
              component={HomeScreen2Class}
              options={{
                  tabBarLabel: 'Home',
                  tabBarIcon: ({ color, focused  }) => (
                      <Icon name={'home'} size={20} color={focused ? '#6646ee' : "#fff"} />
                  ),
                  tabBarOptions: { activeTintColor:'black' }
              }}
              listeners={({ navigation, route }) => ({
                  tabPress: e => {
                      console.log('page Home clicked')
                  }
              })}

好的，但是如何在 tabPress 中调度 reducer 在一个简单的组件中，我必须使用它：

 const action = {type: 'ADD_TEST_2', value: 'blaseb'};
    props.dispatch(action);

【问题讨论】：

标签： reactjs react-native react-native-navigation

【解决方案1】：

如何设置一个 isOpen 状态并在每次打开视图时设置状态，并根据 isOpen 状态调度一个动作？（对原生反应不是很自信）。

const [isOpen, setIsOpen] = useState(false);

...
<View dispatch={isOpen ? dispatch(type: SOME_TYPE, payload }}) : null}>...</View>

【讨论】：

【解决方案2】：

如果你使用react-navigation，你可以使用useFocuseEffect钩子。我认为其他路由器库也应该提供一些像API这样的焦点事件来实现相同的功能。

【讨论】：