Невозможно отобразить центрированный svg в качестве компонента реакции в AppBar на реактивной бумаге на Android - PullRequest
Новая
       80

Невозможно отобразить центрированный svg в качестве компонента реакции в AppBar на реактивной бумаге на Android

2 голосов
/ 16 января 2020

Я создаю реактивное приложение с expo SDK36.

Используется react-native-svg@9.13.3 для рендеринга SVG.

С его помощью можно импортировать .svg непосредственно как компонент реагирования или переписать SVG с их компонентами svg.

Я пробовал оба варианта, и на android он не отображается, если я центрую заголовок на AppBar:

Текущее поведение

Импорт SVG не работает в AppBar на устройстве android.

Ожидаемое поведение

Отображение SVG на всех устройствах

Пример кода 

<svg width="100%" height="100%" viewBox="0 0 76 39" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
        <path d="M10.19 25.75L3.81 17.3H0V38.1C0 38.1 3.9 38.44 3.9 33.62C3.9 28.8 3.9 23.97 3.9 23.97L10.2 31.93L16.37 24V38.1H20.27V17.31H16.46L10.19 25.75Z" fill="white"/>
    </g>
    <defs>
        <clipPath id="clip0">
            <rect width="75.93" height="38.33" fill="white"/>
        </clipPath>
    </defs>
</svg>

Написано с использованием их компонентов SVG: 

import React from 'react';
import {
  G,
  Path,
  Svg,
  Defs,
  ClipPath,
  Rect,
} from 'react-native-svg';
export default function Logo(props) {
  return (
    <Svg width="100%" height="100%" viewBox="0 0 76 39" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <G clip-path="url(#clip0)">
        <Path d="M10.19 25.75L3.81 17.3H0V38.1C0 38.1 3.9 38.44 3.9 33.62C3.9 28.8 3.9 23.97 3.9 23.97L10.2 31.93L16.37 24V38.1H20.27V17.31H16.46L10.19 25.75Z"/>
      </G>
      <Defs>
        <ClipPath id="clip0">
          <Rect width="75.93" height="38.33" fill="red"/>
        </ClipPath>
      </Defs>
    </Svg>
  );
}

textAlign: centered никогда не рендерится на Android, я использую его в AppBar из react-native-paper как это: 

import React from 'react';
import { Appbar as AppBarDefault } from 'react-native-paper';
import ConnectedPaperProvider from '../../components/ui/ConnectedPaperProvider';
import Logo from '../Logo';
const {
  Header,
  BackAction,
  Content,
  Action,
} = AppBarDefault;
/* eslint-disable */
export default class AppBar extends React.Component {
  _goBack = () => console.log('Went back');

  // _handleSearch = () => console.log('Searching');

  _handleMore = () => console.log('Shown more');

  render() {
    return (
      <ConnectedPaperProvider>
        <Header>
          <BackAction
            onPress={this._goBack}
          />
          <Content
            titleStyle={{
              textAlign: 'center',
            }}
            title={<Logo fill="red" />}
          />
          {/* <Action icon="magnify" onPress={this._handleSearch} /> */}
          <Action icon="dots-vertical" onPress={this._handleMore} />
        </Header>
      </ConnectedPaperProvider>
    );
  }
}

Если я уберу textAlign: center, он будет неправильно отцентрирован, но затем будет отображаться.

Ваше окружение 

| software              | version
| --------------------- | -------
| ios or android        | android
| react-native          | 0.61.4
| react-native-paper    | 3.4.0
| node                  | v13.5.0
| npm           | 6.13.4
| expo sdk              | 36

Любая идея, что Я могу сделать, чтобы это исправить?

...