React Native中componentDidMount失效求助：启动页无法切换至登录页

你遇到的核心问题是：你的App组件是函数式组件，但componentDidMount是类组件专属的生命周期方法，函数组件里无法直接使用这个方法，所以你写的componentDidMount代码根本没被执行，导致SplashScreen.hide()没触发，启动页一直无法隐藏，自然看不到登录页面。另外你还错误导入了一个无关的componentdidmount文件，这部分可以直接删掉。

下面给你两种可行的解决方法，优先推荐第一种（React Hooks方案，也是当前React生态的标准写法）：

方法一：使用React Hooks的useEffect替代componentDidMount #

函数组件里要用useEffect钩子来模拟类组件中componentDidMount的效果——当useEffect的依赖数组为空时，它只会在组件挂载完成后执行一次，和componentDidMount的作用完全一致。

修改后的完整代码如下：

import React, { useEffect } from 'react'; 
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Button, TextInput, Image } from 'react-native'; 
import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; 
import Login from './src/components/login/login'; 
import Register from './src/components/register/register'; 
import SplashScreen from 'react-native-splash-screen'; 

const App: () => React$Node = () => { 
  // 用useEffect模拟componentDidMount的执行时机
  useEffect(() => {
    // 组件挂载完成后隐藏启动页
    SplashScreen.hide();
  }, []); // 空依赖数组确保这段代码只执行一次

  return ( 
    <> 
      <Login /> 
    </> 
  ); 
};

export default App; // 注意：别忘记导出组件，原代码缺失了这部分

方法二：将组件改为类组件 #

如果你更习惯类组件的写法，也可以把App改成类组件，这样就能直接使用componentDidMount生命周期方法了：

import React, { Component } from 'react'; 
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Button, TextInput, Image } from 'react-native'; 
import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; 
import Login from './src/components/login/login'; 
import Register from './src/components/register/register'; 
import SplashScreen from 'react-native-splash-screen'; 

class App extends Component {
  componentDidMount() {
    // 组件挂载完成后隐藏启动页
    SplashScreen.hide();
  }

  render() {
    return ( 
      <> 
        <Login /> 
      </> 
    ); 
  }
}

export default App;

补充提醒：原代码里缺失了组件导出语句export default App，这部分一定要加上，否则你的组件无法被项目正确引用。

内容的提问来源于stack exchange，提问作者web_walkerX