如何在Expo弹出屏幕上使用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>

  

我使用SVG图片作为ic_splash.xml创建了文件drawable => NEW => Vector Asset。

但是我不知道如何应用它。

我不知道如何处理iPhone。

告诉我如何应用iPhone和Android。

请帮助我们很多。预先谢谢你。

Answer 1

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

基本上，png和jpeg上只有Android，ios扩展图片文件。

example.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 });
  }
}