如何使用 React Native 制作启动画面

Question

我想用 React Native 制作启动画面，我尝试在这个 guide 上创建这个画面，但是启动画面不起作用，它没有显示任何东西

你知道另一种创建这个视图的方法吗，你能帮我吗？

Answer 1

这是一个让 启动画面 与你的风格 StatusBar 和 TimeOut 2s 导航的解决方案:

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

启动画面：

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 秒，然后导航到主页 :)

Answer 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 /> 是您将显示数据（图片、标题和描述）的组件。这是使用 React Native 和 Expo 创建的。

如何使用 React Native 制作启动画面

How to make a splash screen with react native

javascript

android

splash-screen

react-native