как использовать SVG Image в Splash Screen на Expo eject - PullRequest
Новая
       29

как использовать SVG Image в Splash Screen на Expo eject

1 голос
/ 17 мая 2019

Я отделил «Экспо», используя «Экспо объект». И я хочу использовать SVG для разрешения заставки. Но я не знаю, как это сделать.

Я просто знаю, как использовать изображение только в Android.

Я не знаю, Ios Splash Screen

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>

androidimage

Я создал файл ic_splash.xml, используя изображение SVG как drawable => NEW => Vector Asset.

Но я не знаю, как это применить.

Я не знаю, что делать с iPhone.

Подскажите, как применить iPhone и Android.

Пожалуйста, помогите нам. Заранее спасибо.

1 Ответ

0 голосов
/ 29 мая 2019

Я скрыл основной экран-заставку и использовал сделанный мной экран.

В основном, только файлы изображений с расширением 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 });
  }
}
...