Question

适用于iOS：

在Android上的框外覆盖：

我在某处看到zIndex仅影响兄弟组件，但这适用于iOS 我应该如何在Android上修复它？

https://snack.expo.io/@riwu/animated-zindex

import React from 'react';
import { View, Animated, PanResponder } from 'react-native';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pos: new Animated.ValueXY(),
    };

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null,
        {
          dx: this.state.pos.x,
          dy: this.state.pos.y,
        },
      ]),
    });
  }

  render() {
    return (
      <View
        style={{
          marginTop: 20,
          borderWidth: 1,
          padding: 5,
          width: 50,
          height: 50,
        }}
      >
        <Animated.Image
          {...this.panResponder.panHandlers}
          style={[this.state.pos.getLayout(), { flex: 1, zIndex: 1 }]}
          source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
        />
      </View>
    );
  }
}

export default App;

Answer 1

要使zIndex生效，您需要将元素的位置设为absolute，以便彼此重叠。

因此，生成的代码将如下所示

  <View >
    <View
        style={{
            marginTop: 20,
            borderWidth: 1,
            width: 50,
            height: 50,
            position: 'absolute',
            zIndex: 1
        }}
    >

    </View>
    <Animated.Image
        {...this.panResponder.panHandlers}
        style={[this.state.pos.getLayout(), { marginTop: 25, marginLeft: 5, height: 40, width: 40, position: 'absolute', zIndex: 2}]} //...Adding appropriate margin, height and width as per parent element
        source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
    />
</View>

这里有小吃demo

在平移时覆盖React Native Animated组件

1 个答案: