Javascript 抽屉导航背景图像SVG

我正在研究抽屉导航。我正在呈现自定义contentComponent以编辑抽屉 但问题是，当我调用SVG组件时，除了SVG之外，它不会显示任何内容。 我试过这样做

const CustomDrawerContentComponent = (props) => (

    <SafeAreaView>
      <Svg/>

     <DrawerItems {...props} /> 
    <Text>HI</Text>

  </SafeAreaView>


);

const CustomDrawerContentComponent=（props）=>(
你好
);

我还尝试使用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

从“react navigation drawer”导入{createDrawerNavigator，DrawerItems}；
从“react navigation”导入{createAppContainer}；
从“react native”导入{维度、滚动视图、图像、视图、文本、安全区域视图、图像背景}；
从“React”导入React；
从“../Common/svgMenuTranformer”导入Svg
从“../screens/main”导入主屏幕；
常量CustomDrawerContentComponent=（道具）=>(
}>
你好
);
//抽屉导航选项
const rootpaurernavigator=createpaurernavigator({
主屏幕：{
屏幕：主屏幕，
},
//关于：{
////屏幕：AboutStack，
// },,
},
{
//抽屉位置：'对'，
//使用说明：正确，
抽屉背景颜色：“透明”，
contentComponent:CustomDrawerContentComponent，
//内容选项：{
//activeTintColor:'黑色'，
//activeBackgroundColor:'透明'，
//颜色：“黑色”，
//itemsContainerStyle：{
//结果：0，
//   },
//iconContainerStyle：{
//不透明度：1，
//   },
//项目样式：{
//身高：50，
//   }
// }
});
导出默认createAppContainer（RootDrawerNavigator）；
从“React”导入*作为React
从“react native Svg”导入Svg，{Defs，Path}
/*SVGR删除了一些本机svg:filter不支持的元素*/
功能SVG组件（道具）{
返回(
)
}
导出默认SvgComponent

---

如何将SVG组件显示为背景图像，并在contentComponent中添加文本、导航路线等内容？

您不能在ImageBackground中使用SVG

您需要呈现svg。以及具有绝对位置的内容

常量CustomDrawerContentComponent=（道具）=>(
你好
);
//.....

不能在ImageBackground中使用svg

您需要呈现svg。以及具有绝对位置的内容

常量CustomDrawerContentComponent=（道具）=>(
你好
);
//.....

试试这个：

  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>
    );

返回(
testklasdmkrasdas
testklasdmkrasdas
testklasdmkrasdas
testklasdmkrasdas
testklasdmkrasdas
testklasdmkrasdas
);

试试这个：

  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>
    );

返回(
testklasdmkrasdas
testklasdmkrasdas
testklasdmkrasdas
testklasdmkrasdas
testklasdmkrasdas
testklasdmkrasdas
);

尝试代码后问题仍然存在。内容未显示这是一个输入错误。。不要将绝对视图放在svg中。。但是在svg之后。在尝试代码之后，问题仍然是一样的。内容未显示这是一个输入错误。。不要将绝对视图放在svg中。。但是在svg之后。