时间戳

首页 > 解决方案 > 抽屉导航背景图像 SVG

javascript - 抽屉导航背景图像 SVG

问题描述

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

标签： javascriptreact-nativesvgreact-navigationreact-navigation-drawer

解决方案

您不能在 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>
);

//.....

推荐阅读