android - 如何在 Expo eject 的启动画面中使用 SVG 图像

Question

我使用“Expo 对象”分隔“Expo”。我想使用 SVG 来解析启动画面。但我不知道该怎么做。

我只知道如何在 Android 中使用图像。

我不知道 Ios 启动画面

Android(splash_backgroud.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/splashBackground"/>

    <item><bitmap android:gravity="center" android:src="@drawable/splash" /></item>

</layer-list>

I created the file ic_splash.xml using the SVG image as drawable =>
NEW => Vector Asset.

但我不知道如何应用它。

我不知道如何处理 iPhone。

告诉我如何应用iPhone和Android。

请多多帮助我们。提前谢谢你。

Answer 1

我隐藏了基本的启动画面并使用了我制作的画面。

基本上，只有 png , jpeg扩展图片文件可在 Android 上获得和 ios .

例子.js

import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, SplashScreen } from 'expo';
import SvgUri from "expo-svg-uri";

export default class App extends React.Component {
  state = {
    isReady: false,
  };

  componentDidMount() {
    SplashScreen.preventAutoHide();
  }

  render() {
    if (!this.state.isReady) {
      return (
        <View style={{ flex: 1 }}>
          <SvgUri
            width="200"
            height="200"
            source={require('./assets/images/splash.svg')}
            onLoad={this._cacheResourcesAsync}
          />
        </View>
      );
    }

    return (
      <View style={{ flex: 1 }}>
        <Image source={require('./assets/images/expo-icon.png')} />
        <Image source={require('./assets/images/slack-icon.png')} />
      </View>
    );    
  }


  _cacheResourcesAsync = async () => {
    SplashScreen.hide();
    const images = [
      require('./assets/images/expo-icon.png'),
      require('./assets/images/slack-icon.png'),
    ];

    const cacheImages = images.map((image) => {
      return Asset.fromModule(image).downloadAsync();
    });

    await Promise.all(cacheImages);
    this.setState({ isReady: true });
  }
}