Ящик Навигация фоновое изображение SVG - PullRequest
Новая
       12

Ящик Навигация фоновое изображение SVG

2 голосов
/ 11 марта 2020

Я работаю над навигацией по ящикам. Я предоставляю свой пользовательский 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-компонент в качестве фонового изображения и добавить к нему контент как текст, навигационные маршруты и т. д. c в contentComponent?

1 Ответ

0 голосов
/ 18 марта 2020

Вы не можете использовать SVG внутри ImageBackground.

Вам необходимо визуализировать 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>
);

//.....
...