在 React Native 中，prod 和 dev 之间是否可以有不同的启动屏幕

Question

我是 React Native 的初学者。我知道也许这是一个有点愚蠢的问题，但我不确定在 React Native 中产品和开发之间是否可以有不同的启动屏幕。

我尝试在XCode中为开发添加LaunchScreen和Images，它适用于开发模式，但它在生产模式下产生副作用，因此生产模式无法正常工作。

Answer 1

• 是的，在 React Native 中，prod 和 dev 之间可能有不同的启动屏幕。您可以通过使用基于环境的条件渲染来实现这一点。

• 首先，您需要为您的项目设置不同的环境。您可以通过在项目的根目录中创建 .env 文件并定义环境变量来完成此操作。

  //This is for development
  .env
  REACT_NATIVE_ENV = dev
  
  //This is for production
  .env
  REACT_NATIVE_ENV = prod
  

• 然后，您需要安装react-native-config才能在代码中访问这些环境变量。

  npm install react-native-config
            or
  yarn add react-native-config
  

• 安装react-native-config后，您可以像这样在代码中访问环境变量，

   import config from 'react-native-config';
  
   if (config.REACT_NATIVE_ENV === 'dev') {
     // Show dev splash screen
   } else {
     // Show prod splash screen
   }
  

• 现在，您可以创建两种不同的启动屏幕（一种用于开发，一种用于生产）并根据环境显示它们。

  import React, { useEffect } from 'react';
  import SplashScreen from 'react-native-splash-screen';
  import DevSplashScreen from './DevSplashScreen';
  import ProdSplashScreen from './ProdSplashScreen';
  import config from 'react-native-config';
  
  const App = () => {
    useEffect(() => {
      SplashScreen.hide();
    }, []);
  
    if (config.REACT_NATIVE_ENV === 'dev') {
       return <DevSplashScreen />;
    } else {
       return <ProdSplashScreen />;
    }
  };
  
  export default App;