如何将svg元素（由react-native-svg制作）放置在所有块下？

问题描述 投票：0回答：2

如何将svg元素（由react-native-svg制作）放置在所有块下（我想像ImageBackround一样），这样它就不会与块重叠？ 我尝试做这个绝对位置（带有高程和 Zindex），但它仍然取决于所有块。

这就是想要的样子：

this is how I want it to be

这是我的代码：

<SafeAreaView style={styles.droidSafeArea}>
          <View style={styles.containerHeader}>
            <Image style={styles.headerLogo} source={headerLogo} />
          </View>
          <View style={styles.containerPicker}>
            <TouchableOpacity style={styles.pickerTouch} onPress={() => this.onPressBack()}>
              <View style={styles.picker}>
                <Text style={styles.textPicker}>Back to index</Text>
                <Icon name="chevron-right" style={{ paddingLeft: 7, flex: 2 }} size={15} color="#022B49" />
              </View>
            </TouchableOpacity>
          </View>
          <View style={styles.containerImage}>
            <Svg width={277} height={121} viewBox="0 0 277 121" >
              <Defs>
                <Path id="prefix__b" d="M0 0h277v121H0z" />
              </Defs>
              <G
                transform="translate(-168 -2)"
                filter="url(#prefix__a)"
                fill="none"
                fillRule="evenodd"
                opacity={0.6}
              >
                <G transform="translate(168 2)">
                  <Mask id="prefix__c" fill="#fff">
                    <Use xlinkHref="#prefix__b" />
                  </Mask>
                  <Path
                    d="M12.138-17.58c-1.23 18.043 5.753 28.196 20.95 30.46C55.887 16.276 79.844-.777 96.3 33.056c16.457 33.834 35.763 43.638 58.163 43.638 22.399 0 64.891-18.45 88.369 7.27C258.484 101.108 275.873 112.453 295 118V-23H12.138v5.42z"
                    stroke="#E9E5CF"
                    strokeWidth={2}
                    mask="url(#prefix__c)"
                  />
                  <Path
                    d="M35.12-30.233C34.047-14.366 40.142-5.437 53.407-3.446c19.897 2.986 40.807-12.01 55.17 17.744 14.364 29.754 31.214 38.376 50.764 38.376 19.55 0 56.637-16.225 77.128 6.393C250.128 74.146 265.306 84.123 282 89V-35H35.12v4.767z"
                    stroke="#E9E5CF"
                    strokeWidth={2}
                    mask="url(#prefix__c)"
                  />
                  <Path
                    d="M61.109-41.733c-.966 14.204 4.512 22.197 16.434 23.979C95.426-15.081 114.22-28.506 127.13-1.87c12.91 26.635 28.055 34.353 45.626 34.353 17.571 0 50.904-14.525 69.322 5.722C254.355 51.703 267.996 60.635 283 65V-46H61.109v4.267z"
                    stroke="#E9E5CF"
                    strokeWidth={2}
                    mask="url(#prefix__c)"
                  />
                  <Path
                    d="M79.109-64.733c-.966 14.204 4.512 22.197 16.434 23.979 17.883 2.673 36.677-10.752 49.586 15.884 12.91 26.635 28.055 34.353 45.626 34.353 17.571 0 50.904-14.525 69.322 5.722C272.355 28.703 285.996 37.635 301 42V-69H79.109v4.267z"
                    stroke="#E9E5CF"
                    strokeWidth={2}
                    mask="url(#prefix__c)"
                  />
                </G>
              </G>
            </Svg>
          </View>
        </SafeAreaView>

headerLogo: {
    width: 106,
    height: 24,
    marginLeft: 20,
  },
  droidSafeArea: {
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
    flexDirection: 'row',
    height: 90,
    backgroundColor: '#F6F6F6', // or 'white
    elevation: 0, // for android
  },
  containerHeader: {
    flex: 3,
    alignSelf: 'center',
  },
  containerPicker: {
    flex: 8,
    alignItems: 'flex-end',
    marginRight: 20,
    alignSelf: 'center',
  },
  containerImage: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'flex-end',
    position: 'absolute',
  },
  picker: {
    height: 40,
    width: 114,
    flexDirection: 'row',
    alignItems: 'center',
  },
  pickerTouch: {
    backgroundColor: '#fff',
    borderRadius: 6,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
    elevation: 3,
  },
  textPicker: {
    fontSize: 11,
    lineHeight: 24,
    color: '#022B49',
    fontFamily: 'ProximaNova-Semibold2',
    paddingLeft: 10,
    flex: 7,
    borderRightColor: 'rgba(2,43,73,0.14)',
    borderRightWidth: 0.5,
  },

你可以帮助我吗？

javascript react-native svg
2个回答
1
投票

尝试更改视图的顺序，使 svg 容器位于第一个：

<SafeAreaView style={styles.droidSafeArea}>
    <View style={styles.containerImage}>
        <Svg width={277} height={121} viewBox="0 0 277 121" >
            <Defs>
                <Path id="prefix__b" d="M0 0h277v121H0z" />
            </Defs>
            <G
            transform="translate(-168 -2)"
            filter="url(#prefix__a)"
            fill="none"
            fillRule="evenodd"
            opacity={0.6}
            >
                <G transform="translate(168 2)">
                    <Mask id="prefix__c" fill="#fff">
                    <Use xlinkHref="#prefix__b" />
                    </Mask>
                    <Path
                    d="M12.138-17.58c-1.23 18.043 5.753 28.196 20.95 30.46C55.887 16.276 79.844-.777 96.3 33.056c16.457 33.834 35.763 43.638 58.163 43.638 22.399 0 64.891-18.45 88.369 7.27C258.484 101.108 275.873 112.453 295 118V-23H12.138v5.42z"
                    stroke="#E9E5CF"
                    strokeWidth={2}
                    mask="url(#prefix__c)"
                    />
                    <Path
                    d="M35.12-30.233C34.047-14.366 40.142-5.437 53.407-3.446c19.897 2.986 40.807-12.01 55.17 17.744 14.364 29.754 31.214 38.376 50.764 38.376 19.55 0 56.637-16.225 77.128 6.393C250.128 74.146 265.306 84.123 282 89V-35H35.12v4.767z"
                    stroke="#E9E5CF"
                    strokeWidth={2}
                    mask="url(#prefix__c)"
                    />
                    <Path
                    d="M61.109-41.733c-.966 14.204 4.512 22.197 16.434 23.979C95.426-15.081 114.22-28.506 127.13-1.87c12.91 26.635 28.055 34.353 45.626 34.353 17.571 0 50.904-14.525 69.322 5.722C254.355 51.703 267.996 60.635 283 65V-46H61.109v4.267z"
                    stroke="#E9E5CF"
                    strokeWidth={2}
                    mask="url(#prefix__c)"
                    />
                    <Path
                    d="M79.109-64.733c-.966 14.204 4.512 22.197 16.434 23.979 17.883 2.673 36.677-10.752 49.586 15.884 12.91 26.635 28.055 34.353 45.626 34.353 17.571 0 50.904-14.525 69.322 5.722C272.355 28.703 285.996 37.635 301 42V-69H79.109v4.267z"
                    stroke="#E9E5CF"
                    strokeWidth={2}
                    mask="url(#prefix__c)"
                    />
                </G>
            </G>
        </Svg>
    </View>
    <View style={styles.containerHeader}>
        <Image style={styles.headerLogo} source={headerLogo} />
    </View>
    <View style={styles.containerPicker}>
        <TouchableOpacity style={styles.pickerTouch} onPress={() => this.onPressBack()}>
            <View style={styles.picker}>
                <Text style={styles.textPicker}>Back to index</Text>
                <Icon name="chevron-right" style={{ paddingLeft: 7, flex: 2 }} size={15} color="#022B49" />
            </View>
        </TouchableOpacity>
    </View>
</SafeAreaView>
0
投票

改变元素的顺序对我来说效果很好

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.