React-Native 启动画面控制时间答案

【问题标题】：React-Native Splash Screen Control TimeReact-Native 启动画面控制时间
【发布时间】：2018-11-20 19:22:31
【问题描述】：

我想控制启动画面的时间。我更改/创建了下一个文件来制作飞溅，并且效果很好。但我不想为此使用任何库。

android/app/src/main/java/com/MYAPP/SpashActivity.javaandroid/app/src/main/AndroidManifest.xmlandroid/app/src/main/values/styles.xml android/app/src/main/res/addedAllFoldersWithPNGLogos android/app/src/main/res/drawable/splash_background

谢谢

【问题讨论】：

你是在原生 android 中编码吗？还是反应原生？！
react-native，在 ubuntu 中编码，所以对于 android

标签： react-native splash-screen

【解决方案1】：

您无需在android 文件夹中创建活动。所有页面和视图都是index.js内的js文件，您可以通过React Navigation等包在它们之间切换。要创建启动画面，您可以创建一个splashScreen.js 文件并从index.js 调用它。在splashScreen.js 中，您可以设置一个计时器，然后在该时间之后，您的应用程序的第一页（例如主页）会调用。这是splashScreen.js的示例代码：

export default class SplashScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        setTimeout(() => {
            // go to Home page
        }, 2500)
    }

    render() {
        return (
            <View style={{ backgroundColor: 'white' }}>
                <View style={{ flex: 1, paddingTop: 50 }}>
                    <Text>Splash Screen</Text>
                </View>
            </View>
        )
    }
}

希望对你有所帮助。

【讨论】：

这是我解决它的方式，但不是我想要的方式。这不是一个实际的启动画面，它会像它一样工作，但事实并非如此。非常感谢您的回答，但不是我要找的！我会继续努力的！
确切地说，如果您始终只使用“特定”设备，则此解决方案非常出色。正如@FernandoPalma 所做的那样，最初的初始屏幕会根据使用的设备自动管理所有尺寸。好主意，但是，我需要做很多工作;-)

【解决方案2】：

react-native-splash-screen 对此有很好的实现。

安装并链接原生依赖项后，您可以控制何时在原生代码中显示启动画面：

安卓：

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

iOS：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];

    return YES;
}

然后在您的 React 代码中，您可以控制何时隐藏启动画面

反应组件：

componentDidMount() {
  // do stuff while splash screen is shown
  // After having done stuff (such as async tasks) hide the splash screen
  SplashScreen.hide();
}

React Hooks（组件加载后隐藏）：

  React.useEffect(() => {
    SplashScreen.hide();
  }, []);

React Hooks（超时后隐藏）：

const [hideSplash, setHideSplash] = React.useState(false);

React.useEffect(() => {
  setTimeout(() => {
    setHideSplash(true);
  }, 1000); // amount of time the splash is shown from the time component is rendered
}, []);

React.useEffect(() => {
  hideSplash && SplashScreen.hide();
}, [hideSplash]);

// ...

【讨论】：

【解决方案3】：

对于 Android，我确实喜欢这样，

2 秒后渲染所有内容，直到 2 秒我的初始屏幕出现

import React, { useState } from 'react'

import Navigator from './Navigators/Main'

const App = () => {

  const [isLoad, setIsLoad] = useState(false);

  setTimeout(() => {
    setIsLoad(true);
  }, 2000);

  return isLoad ? <Navigator /> : null
}

export default App

【讨论】：