javascript - 无法在 Android 上 react-native-paper 的 AppBar 中显示居中的 svg 作为反应组件

Question

我正在使用 expo SDK36 构建一个 react-native 应用程序。

它用于react-native-svg@9.13.3渲染 svg。

有了它，你可以.svg直接将它作为一个 react 组件导入，或者用它们的 svg 组件重写 SVG。

我都试过了，如果我在 AppBar 上居中标题，它不会在 android 上显示：

当前行为

Svg 导入在 Android 设备上的 AppBar 中不起作用。

预期行为

在所有设备上显示 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 上渲染，我在AppBarof 中使用它，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

知道我能做些什么来解决它吗？

标签： javascriptreactjsreact-nativeexporeact-native-paper