在 react-native 中使子视图或文本视图滚动到具有透明背景的 SVG 形状后面

Question

我试图让滚动视图中的文本或任何其他子视图出现在透明的 SVG 形状后面，以下 SVG 形状代码在 react-native 中：

import React, { Component } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import  { Path, G, Svg, Rect } from 'react-native-svg'

const shapes = {
    pathOne: "M380.279 107.377C380.279 107.377 295.739 13.1031 187.625 107.25C79.5108 201.397 -1.97128 107.125 -1.97128 107.125L-1.89778 1.07516e-06L380.353 0.252415L380.279 107.377Z",
}


export class WaveShape extends Component {


  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {

    const { width, height } = Dimensions.get("screen")

    return (
        <Svg width="357" height="187" viewBox="-1 -1 375 187">
            <Path fill="red" fillOpacity={0.5} d={shapes.pathOne}></Path>
        </Svg>
    );
  }
}

我试图让 SVG 形状出现的组件：

import React, { Fragment, Component } from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
  } from 'react-native';

  import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
  } from 'react-native/Libraries/NewAppScreen';
import { WaveShape } from '../components/WaveShape';

export class Main extends Component {

  static navigationOptions = {
      header: null
  }

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
        <Fragment>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView>
            <WaveShape></WaveShape>
            <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={styles.scrollView}>
                {global.HermesInternal == null ? null : (
                <View style={styles.engine}>
                    <Text style={styles.footer}>Engine: Hermes</Text>
                </View>
                )}
                <View style={styles.body}>
                <View style={styles.sectionContainer}>
                    <Text style={styles.sectionTitle}>Step One</Text>
                    <Text style={styles.sectionDescription}>
                    Edit <Text style={styles.highlight}>App.js</Text> to change this
                    screen and then come back to see your edits.
                    </Text>
                </View>
                <View style={styles.sectionContainer}>
                    <Text style={styles.sectionTitle}>See Your Changes</Text>
                    <Text style={styles.sectionDescription}>
                    <ReloadInstructions />
                    </Text>
                </View>
                <View style={styles.sectionContainer}>
                    <Text style={styles.sectionTitle}>Debug</Text>
                    <Text style={styles.sectionDescription}>
                    <DebugInstructions />
                    </Text>
                </View>
                <View style={styles.sectionContainer}>
                    <Text style={styles.sectionTitle}>Learn More</Text>
                    <Text style={styles.sectionDescription}>
                    Read the docs to discover what to do next:
                    </Text>
                </View>
                <LearnMoreLinks />
                </View>
            </ScrollView>
            </SafeAreaView>
        </Fragment>
    );
  }
}

const styles = StyleSheet.create({
    scrollView: {
      backgroundColor: "white",
    },
    engine: {
      position: 'absolute',
      right: 0,
    },
    body: {
      backgroundColor: Colors.white,
    },
    sectionContainer: {
      marginTop: 32,
      paddingHorizontal: 24,
    },
    sectionTitle: {
      fontSize: 24,
      fontWeight: '600',
      color: Colors.black,
    },
    sectionDescription: {
      marginTop: 8,
      fontSize: 18,
      fontWeight: '400',
      color: Colors.dark,
    },
    highlight: {
      fontWeight: '700',
    },
    footer: {
      color: Colors.dark,
      fontSize: 12,
      fontWeight: '600',
      padding: 4,
      paddingRight: 12,
      textAlign: 'right',
    },
  });

这就是我得到的结果：

现在我的目标是让子视图或文本出现在波形路径后面，而不是包含 SVG 路径的视图框后面。

Answer 1

感谢 hong develop 我能够通过执行以下操作实现我想要的：

SVG 形状的代码：

import React, { Component } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import  { Path, G, Svg, Rect } from 'react-native-svg'

const shapes = {
    pathOne: "M380.279 107.377C380.279 107.377 295.739 13.1031 187.625 107.25C79.5108 201.397 -1.97128 107.125 -1.97128 107.125L-1.89778 1.07516e-06L380.353 0.252415L380.279 107.377Z",
}


export class WaveShape extends Component {


  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {

    const { width, height } = Dimensions.get("screen")
    const { style, ...props } = this.props

    return (
        <Svg style={[style]} {...props} width="357" height="187" viewBox="-1 -1 375 187">
            <Path fill="red" fillOpacity={0.5} d={shapes.pathOne}></Path>
        </Svg>
    );
  }
}

我调用 SVG 形状的代码：

import React, { Fragment, Component } from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
  } from 'react-native';

  import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
  } from 'react-native/Libraries/NewAppScreen';
import { WaveShape } from '../components/WaveShape';

export class Main extends Component {

  static navigationOptions = {
      header: null
  }

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
        <Fragment>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView>
            <WaveShape style={{ position: "absolute" ,top: 0, zIndex: 1 }}></WaveShape>
            <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={styles.scrollView}>
                <View style={{ paddingTop: "45%" }}></View>
                {global.HermesInternal == null ? null : (
                <View style={styles.engine}>
                    <Text style={styles.footer}>Engine: Hermes</Text>
                </View>
                )}
                <View style={styles.body}>
                <View style={styles.sectionContainer}>
                    <Text style={styles.sectionTitle}>Step One</Text>
                    <Text style={styles.sectionDescription}>
                    Edit <Text style={styles.highlight}>App.js</Text> to change this
                    screen and then come back to see your edits.
                    </Text>
                </View>
                <View style={styles.sectionContainer}>
                    <Text style={styles.sectionTitle}>See Your Changes</Text>
                    <Text style={styles.sectionDescription}>
                    <ReloadInstructions />
                    </Text>
                </View>
                <View style={styles.sectionContainer}>
                    <Text style={styles.sectionTitle}>Debug</Text>
                    <Text style={styles.sectionDescription}>
                    <DebugInstructions />
                    </Text>
                </View>
                <View style={styles.sectionContainer}>
                    <Text style={styles.sectionTitle}>Learn More</Text>
                    <Text style={styles.sectionDescription}>
                    Read the docs to discover what to do next:
                    </Text>
                </View>
                <LearnMoreLinks />
                </View>
            </ScrollView>
            </SafeAreaView>
        </Fragment>
    );
  }
}

const styles = StyleSheet.create({
    scrollView: {
      backgroundColor: "white",
    },
    engine: {
      position: 'absolute',
      right: 0,
    },
    body: {
      backgroundColor: Colors.white,
    },
    sectionContainer: {
      marginTop: 32,
      paddingHorizontal: 24,
    },
    sectionTitle: {
      fontSize: 24,
      fontWeight: '600',
      color: Colors.black,
    },
    sectionDescription: {
      marginTop: 8,
      fontSize: 18,
      fontWeight: '400',
      color: Colors.dark,
    },
    highlight: {
      fontWeight: '700',
    },
    footer: {
      color: Colors.dark,
      fontSize: 12,
      fontWeight: '600',
      padding: 4,
      paddingRight: 12,
      textAlign: 'right',
    },
  });

结果：

在 react-native 中使子视图或文本视图滚动到具有透明背景的 SVG 形状后面

Make child views or Text view scroll behind SVG shape with transparent background in react-native

react-native

svg

react-native-svg