我正在做抽屉导航。我正在渲染我的自定义contentComponent以编辑我的抽屉 导航,但是问题是,当我调用SVG组件时,除了SVG之外,它没有显示任何内容。 我尝试过这种方式。
const CustomDrawerContentComponent = (props) => (
<SafeAreaView>
<Svg/>
<DrawerItems {...props} />
<Text>HI</Text>
</SafeAreaView>
);
我还试图将我的SVG用作ImageBackground,如下面的代码所示。
import { createDrawerNavigator,DrawerItems } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import { Dimensions, ScrollView, Image, View,Text,SafeAreaView,ImageBackground } from 'react-native';
import React from 'react';
import Svg from '../Common/svgMenuTranformer'
import mainScreen from '../screens/main';
const CustomDrawerContentComponent = (props) => (
<SafeAreaView>
<ImageBackground style={{width:'100%',height:'100%'}} source={()=> <Svg/>}>
<DrawerItems {...props} />
<Text>HI</Text>
</ImageBackground>
</SafeAreaView>
);
// drawer navigation options
const RootDrawerNavigator = createDrawerNavigator({
HomeScreen: {
screen: mainScreen,
},
// About: {
// //screen: AboutStack,
// },,
},
{
//drawerPosition: 'right',
//useNativeAnimations : true,
drawerBackgroundColor: 'transparent',
contentComponent: CustomDrawerContentComponent,
// contentOptions: {
// activeTintColor: 'black',
// activeBackgroundColor: 'transparent',
// inactiveTintColor: 'black',
// itemsContainerStyle: {
// marginVertical: 0,
// },
// iconContainerStyle: {
// opacity: 1,
// },
// itemStyle: {
// height: 50,
// }
// }
});
export default createAppContainer(RootDrawerNavigator);
import * as React from "react"
import Svg, { Defs, Path } from "react-native-svg"
/* SVGR has dropped some elements not supported by react-native-svg: filter */
function SvgComponent(props) {
return (
<Svg width={"100%"} height={"100%"} viewBox="0 0 454 1536" {...props}>
<Defs></Defs>
<Path
d="M-128.13 904s707.552 181.69 512 804H-166z"
fillRule="evenodd"
fill="#2196f3"
filter="url(#prefix__a)"
/>
<Path
d="M-84 1456s594-172 494-584c0 0-90.022-228.968-18-378 69.979-144.8 54-384-64-496H-84v1458z"
fill="#fff"
filter="url(#prefix__b)"
fillRule="evenodd"
/>
</Svg>
)
}
export default SvgComponent
如何将我的SVG组件显示为背景图像,并在contentComponent中向其中添加文本,导航路线等内容?
答案 0 :(得分:0)
您不能在ImageBackground内部使用svg。
您需要渲染svg。以及绝对位置的内容
const CustomDrawerContentComponent = (props) => (
<SafeAreaView>
<View>
<Svg style={{//passs your style here}}/>
<View style={{position:'absolute', top:0, left:0, right:0, bottom:0,}}>
<DrawerItems {...props} />
<Text>HI</Text>
</View>
</View>
</SafeAreaView>
);
//.....
答案 1 :(得分:-2)
尝试一下:
return(
<SafeAreaView style={{ flex:1 }}>
<View style={{ position:'absolute', top:0, bottom:0, right:0, left:0 }}>
<BGImage />
</View>
<Text>Testklasdmklasmdas</Text>
<Text>Testklasdmklasmdas</Text>
<Text>Testklasdmklasmdas</Text>
<Text>Testklasdmklasmdas</Text>
<Text>Testklasdmklasmdas</Text>
<Text>Testklasdmklasmdas</Text>
</SafeAreaView>
);