componentDidMount 仅在第一次屏幕加载时工作在本机反应答案

【问题标题】：componentDidMount working only at first time screen load in react nativecomponentDidMount 仅在第一次屏幕加载时工作在本机反应
【发布时间】：2021-01-22 11:46:45
【问题描述】：

我在 react native app 的 componentDidMount 中添加了警报。警报显示然后用户第一次打开屏幕。当用户转到第二个屏幕然后通过单击菜单再次返回到第一个屏幕时，警报不会显示。请帮忙。

这是反应原生应用。

import React, { Component } from 'react';

import { View, Image, TouchableOpacity, Alert } from 'react-native';

import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';

import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';

class NavigationDrawerStructure extends Component {

  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
      Alert.alert("hello");
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
          <Image
            source={require('./image/drawer.png')}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

//For React Navigation 2.+ need to use StackNavigator instead createStackNavigator
//const FirstActivity_StackNavigator = StackNavigator({

//For React Navigation 3.+
const FirstActivity_StackNavigator = createStackNavigator({
  //All the screen from the Screen1 will be indexed here
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 1',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

//For React Navigation 2.+ need to use StackNavigator instead createStackNavigator
//const FirstActivity_StackNavigator = StackNavigator({

//For React Navigation 3.+
const Screen2_StackNavigator = createStackNavigator({
  //All the screen from the Screen2 will be indexed here
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 2',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

//For React Navigation 2.+ need to use StackNavigator instead createStackNavigator
//const FirstActivity_StackNavigator = StackNavigator({

//For React Navigation 3.+
const Screen3_StackNavigator = createStackNavigator({
  //All the screen from the Screen3 will be indexed here
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

//For React Navigation 2.+ need to use DrawerNavigator instead createDrawerNavigator
//const DrawerNavigatorExample = DrawerNavigator({

//For React Navigation 3.+
const DrawerNavigatorExample = createDrawerNavigator({
  //Drawer Optons and indexing
  Screen1: {
    //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 1',
    },
  },

  Screen2: {
    //Title
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 2',
    },
  },

  Screen3: {
    //Title
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 3',
    },
  },
});

导出默认createAppContainer(DrawerNavigatorExample);

我希望用户每次打开第一个屏幕时都会发出 hello 警报，但是当用户打开应用程序时，当用户打开屏幕时，hello 只显示一次，然后再次来到第一个屏幕时，警报不会显示。

【问题讨论】：

标签： react-native

【解决方案1】：

问题是componentDidMount只有在组件已经被触发时才会触发安装。查看代码，您似乎正在使用 stackNavigator。

使用堆栈在另一个屏幕上导航实际上不会卸载您查看的第一个屏幕，当您在另一个屏幕上时保持它处于活动状态。

这就是它被触发一次的原因

如果您需要在每次查看屏幕时运行一个函数，您可以使用反应导航焦点事件。查看 react-navigation 文档：https://reactnavigation.org/docs/en/function-after-focusing-screen.html

【讨论】：