在显示主屏幕之前显示启动画面以反应原生而不使用第三方库

Question

我是初学者,反应原生,所以可能我的问题似乎对所有专家都很愚蠢.

但我正在努力实现我想要实现的基本功能,我想用启动画面启动我的应用程序,几秒钟后我想显示登录屏幕或主屏幕.

我检查了一些示例,但没有找到任何完整代码的示例,所以不知道如何在我的应用程序中使用这些代码片段.

我试图按照文档应用一些代码,但我的代码给出了错误,请看看并帮助我.

以下是我的代码:

Index.android.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Navigator
    } from 'react-native';
    import Splash from './Splash';
    import Login from './Login';

    export default class DigitalReceipt extends Component {
      render() {
        return (
           {
            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromRight;
          }} />
        );
      }
      renderScene(route, navigator) {
        var routeId = route.id;
        if (routeId === 'Splash') {
          return (
            
          );
        }
        if (routeId === 'Login') {
          return (
            
          );
        }
        return this.noRoute(navigator);

      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

    AppRegistry.registerComponent('DigitalReceipt', () => DigitalReceipt);

Splash.js

    import React, { Component } from 'react';
    import { 
        AppRegistry,
        View,
        Text,
        StyleSheet,
        Image
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import Login from './Login';

    class Splash extends Component{
        componentWillMount() {
            var navigator = this.props.navigator;
            setTimeout(() => {
                navigate('Login')
            }, 1000);
          }

        render(){
            const { navigate } = this.props.navigation;
            return (
                
                     
                         
                        Digital Receipt  
                    
                    
                        Powered by React Native  
                     
                
            );
        }
    }
    const SplashApp = StackNavigator({
        Login: { screen: Login },
        Splash: { screen: Splash },
      });

    const styles = StyleSheet.create({
        wrapper: {
            backgroundColor: '#FFFFFF',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        title: {
            color: '#2ea9d3',
            fontSize: 32,
            fontWeight: 'bold'
        },
        subtitle:{
            color: '#2ea9d3',
            fontWeight: '200',
            paddingBottom: 20
        },
        titleWrapper:{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },

        logo:{
            width: 96,
            height: 96
        }
    });

    AppRegistry.registerComponent('SplashApp', () => SplashApp);

Login.js

    import React, { Component } from 'react';
    import { 
        AppRegistry,
        View,
        Text,
        StyleSheet,
        Image
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import Splash from './Splash';

    class Login extends Component{
        static navigationOptions = {
            title: 'Welcome',
          };
        render(){
            const { navigate } = this.props.navigation;
            return (
                
                    
                        Login Screen  
                     
                
            );
        }

    }
    const LoginApp = StackNavigator({
        Login: { screen: Login },
        Splash: { screen: Splash },
      });
    const styles = StyleSheet.create({
        wrapper: {
            backgroundColor: '#FFFFFF',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        title: {
            color: '#2ea9d3',
            fontSize: 32,
            fontWeight: 'bold'
        }
    });
    AppRegistry.registerComponent('LoginApp', () => LoginApp);

如果您发现任何问题,请帮助我,对不起代码中的愚蠢错误.

谢谢

Answer 1

您可以尝试这个例子.在启动画面中不需要stacknavigator.

constructor(props){
    super(props);
    this.state = {
        timePassed: false,
    };
}

componentDidMount() {
    setTimeout( () => {
        this.setTimePassed();
    },1000);
}

setTimePassed() {
    this.setState({timePassed: true});
}

render() {
    if (!this.state.timePassed) {
        return <SplashScreen/>;
    } else {
        return <Login/>;
    }
}

Answer 2

你总是可以用原生的方式做到这一点：

首先，您需要在不同设备上显示启动画面的图像：

• 低密度脂蛋白：
  • 纵向：200x320px
  • 横向：320x200px
• MDPI：
  • 纵向：320x480px
  • 横向：480x320px
• 高清晰度指数：
  • 纵向：480x800px
  • 横向：800x480px
• XHDPI：
  • 纵向：720px1280px
  • 横向：1280x720px
• XXHDPI：
  • 纵向：960px1600px
  • 横向：1600x960px
• XXXHDPI：
  • 纵向：1280px1920px
  • 横向：1920x1280px

它们需要png格式化，然后将它们放在上面android/app/src/main/res/drawable并创建一个以每个图像的分辨率命名的文件夹。例如：drawable/drawable-hdpi。

然后在 drawable 文件夹中，您必须创建一个名为的文件background_splash.xml并放置如下内容：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <bitmap
            android:gravity="fill"
            android:src="@drawable/screen"/>
    </item>
</selector>

之后你必须添加一个新的样式 android/app/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>

</resources>

更新您的AndroidManifest.xml文件，添加一个名为的新活动SplashActivity并添加android:theme="@style/SplashTheme". 现在创建一个名为 的空活动MainActibity。你AndroidManifest.xml应该看起来像这样：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.exampleapp"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        android:minSdkVersion="23"
        android:targetSdkVersion="26" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
        <activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity" 
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:windowSoftInputMode="adjustResize"
            android:exported=”true”
        />
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

现在我们需要告诉 SplashActivity 转到 MainActivity，它代表我们的实际应用程序。为此，您需要创建一个名为SplashActivity.

package com.exampleapp; // change to the name of your app.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

现在你应该看到一个闪屏。

https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

Answer 3

在React中制作闪屏的正确方法是修改根路由。首先，您需要为您的应用程序创建图像。您可以通过在网站https://apetools.webprofusion.com/app/#/上传图像来快速完成此操作，它将创建一个包含 iO、Windows 和 Android 的所有图像的捆绑文件，并将它们放入文件夹中每个设备。您需要将这些文件夹复制到每个设备的路径中，如果您创建了任何文件夹，请将其替换。路线 {device}/app/src/main/res/{folder-name}

在路线的可绘制文件夹中，{device}/app/src/main/res/drawable您将拥有icon.png&screen.png并创建一个名为的文件

splash_background.xml 在此文件中添加下一个文本

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <bitmap
      android:gravity="fill"
      android:src="@drawable/screen"
    />
  </item>
</selector>

在路由中{device}/app/src/main/java/com/{name-of-project}添加一个名为SplashActivity.java

在此文件中SplashActivity.java添加以下内容：

package com.prework;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);
    finish();
  }
}

在路线{device}/app/src/main/res/values/styles.xml中将其更改如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background</item>
    </style>

</resources>

并在路线{device}/app/src/main/res/AndroidManifest.xml中将其更改如下

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.prework">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@drawable/icon"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

      <activity
        android:name=".SplashActivity"
        android:label="@string/app_name"
        android:theme="@style/SplashTheme"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
      </activity>

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

现在通过在命令行中运行来重建您的应用程序react-native run-android