Question

我想制作一个反应原生的启动画面，我尝试在此guide上创建此屏幕但不起作用的启动画面它没有向我显示任何内容

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

Answer 1

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

在我的项目中，我希望通过 SplashScreen.js 进行操作，然后导航到 Home.js 或 Error.js 。我的 App.js 在页面之间导航！ Home.js＆amp; Error.js内容是可选的（想象一下只有<Text>主页和错误！

SplashScreen：

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秒，然后导航到Home：）

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

如何使用本机反应制作闪屏

2 个答案: