react native动画闪屏在android

cigdeys3 于 2023-10-22 发布在 React

关注(0)|答案(2)|浏览(132)

我有一个GIF图像，需要在Android设备的React本地显示为闪屏。在www.example.com中MainActivity.java，代码是

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);

        FrameLayout splashLayout = findViewById(R.id.splash_layout);
        ImageView splashImage = findViewById(R.id.splash_image);
        Glide.with(this).load(R.raw.splashscreen).into(splashImage);

.... }

activity_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/splash_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible">
        <ImageView
            android:id="@+id/splash_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@raw/splashscreen"
            android:scaleType="centerCrop" />
    </FrameLayout>

</RelativeLayout>

1.问题是在显示gif图像后，控件没有转移到react native的App组件。如果框架布局设置为隐藏，它会卡住并显示白色背景。
1.另一个问题是，当打开应用程序时，从徽标到初始屏幕的遍历过程中会显示白色背景。
是否有任何原生的方式来显示gif图像作为启动画面，而不使用洛蒂或任何插件？

react-native

来源：https://stackoverflow.com/questions/77299512/react-native-animated-splash-screen-in-android

2条答案

按热度按时间

tjjdgumg1#

你可以使用react native bootsplash，这是一个非常不错的软件包，它支持动画，并提供了很多自定义功能！

赞(0）回复(0）举报 2023-10-22

qfe3c7zg2#

在React Native中，您可以使用react-native-fast-image库沿着lottie-react-native库显示GIF图像。这种组合使您可以轻松地显示GIF和控制动画。以下是如何在React Native Android应用程序中显示GIF图像的分步指南：
1.安装附件：
首先，通过运行以下命令安装必要的库：

npm install react-native-fast-image
npm install lottie-react-native

1.链接本机模块：
您可能需要为已安装的库链接本机模块。运行以下命令：

react-native link

1.导入库：
在你的React Native组件中，导入必要的库：

import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';
import LottieView from 'lottie-react-native';

*显示GIF图片：

现在可以使用LottieView组件显示GIF图像。举例来说：

import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';
import LottieView from 'lottie-react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LottieView
        source={require('./your-gif-file.json')} // Replace with the path to your GIF file
        autoPlay
        loop
      />
    </View>
  );
};

export default App;

确保将'./your-gif-file.json'替换为GIF文件的正确路径。Lottie希望GIF是JSON格式的，因此您可能需要使用LottieFiles网站（https://lottiefiles.com/）等工具将GIF转换为Lottie JSON格式。
*启动开发服务器：

使用以下命令启动开发服务器：

npx react-native start

*在Android上运行应用：

使用以下命令在Android模拟器或物理Android设备上运行React Native应用程序：

npx react-native run-android

这将使用LottieView组件显示GIF图像。请记住将'./your-gif-file.json'替换为GIF文件的正确路径，并确保GIF为Lottie JSON格式。

赞(0）回复(0）举报 2023-10-22

我来回答

react native动画闪屏在android

2条答案

相关问题

热门标签

最新问答