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

Question

我想使用 react native 制作启动画面，我尝试在本指南中创建此屏幕，但无法正常工作启动画面它没有向我显示任何内容

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

Answer 1

这是使用StatusBar和TimeOut 2s 的样式制作漂亮的启动画面以导航它的解决方案：

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

启动画面：

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 创建的。