我正在使用 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 上渲染,我在AppBar
of 中使用它,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
知道我能做些什么来解决它吗?