Question

我正在使用绝对位置在图像上重叠组件。其后还有另一个组件，它是带有橙色背景的视图。它位于绝对定位的组件后面。如何在绝对定位的组件之后保留它（该组件的高度可能会有所不同，因此我在这里不能使用边距或高度等）？看看小吃：https://snack.expo.io/@codebyte99/overlap-test

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
       <Image
          source={{
            uri: 'https://facebook.github.io/react/logo-og.png',
            cache: 'only-if-cached',
          }}
          style={{width: 400, height: 100}}
        />

        <View style={styles.overlap}>
          <Text>Event1</Text>
          <Text>Event2</Text>
          <Text>Event3</Text>
          <Text>Event4</Text>
          <Text>Event5</Text>
          <Text>Event6</Text>
          <Text>Event7</Text>
        </View>

        <View style={{ backgroundColor: 'orange', height: 200, width: 500 }}/>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  overlap: {
    width: 300, 
    backgroundColor: 'red', 
    borderColor: 'red', 
    borderWidth: 1,
    position: 'absolute',
    top: 80,
    zIndex: 9999,
    overflow: 'visible'
  },
});

现在的样子：

我想要什么：

Answer 1

在一个容器中放置橙色和红色框，并将其设置为绝对位置：

<View style={{position: "absolute", flexDirection:"column"}}
     <View style={styles.YourStyleWithoutPositionAbsolute}>
          <Text>Event1</Text>
          <Text>Event2</Text>
          <Text>Event3</Text>
          <Text>Event4</Text>
          <Text>Event5</Text>
          <Text>Event6</Text>
          <Text>Event7</Text>
        </View>

   <View style={{ backgroundColor: 'orange', height: 200, width: 500 }}/>
</View>

图片在本机重叠

1 个答案: