抽屉导航背景图片SVG

Question

bounty到期在4天内。该问题的答案有资格获得+ 50声望赏金。Hamza Haider想要引起更多关注对此问题。

我正在抽屉式导航。我正在渲染我的自定义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中向其中添加文本，导航路线等内容？

Answer 1

您不能在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>            
            </Svg>
            </View>

      </SafeAreaView>
);

//.....