如何使用本机反应制作启动画面答案

【问题标题】：How to make a splash screen with react native如何使用本机反应制作启动画面
【发布时间】：2018-08-04 06:28:56
【问题描述】：

我想用 react native 制作一个启动画面，我尝试在这个 guide 上创建这个屏幕，但是启动画面不起作用，它没有向我显示任何内容

您知道创建此视图的另一种方法吗？请帮帮我。

【问题讨论】：

我给你一个答案，但你可以通过 android studio 源搜索并找到 java 和 Manifest 的飞溅。（但他们也一样）

标签： javascript android react-native splash-screen

【解决方案1】：

这是一个用你的风格制作漂亮的启动画面的解决方案，StatusBar 和 TimeOut 2s 来导航它：

在我的项目中，我想用 SplashScreen.js 引起轰动，然后导航到 Home.js 或 Error.js 。我的 App.js 在页面之间导航！ Home.js 和 Error.js 内容是可选的（想象其中只有 <Text> HomePage 和错误！

启动画面：

import React from 'react';
import { StatusBar , View , Text , ActivityIndicator } from 'react-native';
export default class SplashScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#34495e'}}>
                <StatusBar backgroundColor="#2c3e50" barStyle="light-content"/> //NICE STYLE FOR YOUR STATUSBAR
                <Text style={{ color : 'white',fontSize : 18 }}>Hello Splash</Text>
                <ActivityIndicator color={'white'}/> //YOUR SPINNER WAITING
            </View>
        )
    }
}

在您的 **App.js 中：**

import React from 'react';
import SplashScreen from './SplashScreen';
import Error from "./Error";
import Home from "./Home";

export default class Application extends React.Component {

    componentWillMount() {
        this.state = {
            view : <SplashScreen />
        };


        setTimeout(() => {
            //IF FALSE NAVIGATE TO ERROR
            if(true) {
                this.setState({
                    view : <Home/>
                })
            } else {
                this.setState({
                    view : <Error/>
                })
            }
        }, 2000) //TIME OF WAITING


    }

    render() {
        return (
            this.state.view
        )
    }
}

如果您构建和测试，您的项目会真正运行，并且 Splash 在您的屏幕上停留 2 秒，然后导航到主页 :)

【讨论】：

嗨伙计，谢谢我用你的想法创建一个飞溅，稍作修改，因为我使用反应导航，我告诉你我该怎么做。我创建了一个名为 Init 的中间类，在这个类中，我将您的代码显示为我在 react native 中新建的启动视图，我正在学习，您可以告诉我这是否是使用 react Navigation 的最佳方法。问候。

【解决方案2】：

就像这样：

<FlatList
        data={[
          {
            id: "1",
            image: require("./someImage.png"),
            title: "Title",
            description: "Description",
          },
          {
            id: "2",
            image: require("./someImage.png"),
            title: "Title",
            description: "Description",
          },
          {
            id: "3",
            image: require("./someImage.png"),
            title: "Title",
            description: "Description",
          },
        ]}
        renderItem={({ item, index }) => {
          return (
            <Item
              image={item.image}
              title={item.title}
              description={item.description}
            />
          );
        }}
        keyExtractor={(item) => item.id}
        horizontal
        showsHorizontalScrollIndicator
        pagingEnabled
        bounces={false}
      />

<Item /> 是您将显示数据（图片、标题和说明）的组件。这是使用带有 Expo 的 React Native 创建的。

【讨论】：