每次组件成为 react-native 中的活动选项卡时调用函数

Question

我想触发一个函数，每次组件在底部导航 react-native 中变为活动选项卡时。有人可以给我一个解决方案吗？

Answer 1

使用focus在导航事件如下

componentDidMount() {
    this.focusListener = this.props.navigation.addListener('focus',
        () => alert('Screen focused'))
}

确保删除侦听器

componentWillUnmount() {
    this.focusListener.remove();
}

有关额外信息，请查看以下示例

import React, { Component } from "react";
import { Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

class HomeScreen extends Component {
  componentDidMount() {
    this.focusListener = this.props.navigation.addListener("focus", () =>
      alert("Screen home")
    );
  }

  componentWillUnmount() {
    this.focusListener.remove();
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Home</Text>
      </View>
    );
  }
}

class SettingsScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Settings</Text>
      </View>
    );
  }
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

希望这对你有帮助。如有疑问，请放心。