在React Native中，如何将视图放在另一个视图的顶部，其中一部分位于视图的边界之外？

Question

我正在尝试使用React Native进行如下布局。

如何指定B相对于A的位置？

使用iOS Interface Builder和autoconstraints，这可以非常明确地完成，并且轻而易举。如何用React Native实现这一目标并不是那么明显。

Answer 1

将以下内容添加到“浮动”视图

position: 'absolute'

您可能还需要为定位添加顶部和左侧值

请参阅此示例：https://rnplay.org/apps/OjzcxQ/edit

Answer 2

您可以使用zIndex将视图置于另一个视图之上。它的工作方式类似于CSS z-index属性 - 具有较大zIndex的组件将呈现在顶部。

您可以参考：Layout Props

摘录：

    <ScrollView>
          <StatusBar backgroundColor="black" barStyle="light-content" />
          <Image style={styles.headerImage} source={{ uri: "http://www.artwallpaperhi.com/thumbnails/detail/20140814/cityscapes%20buildings%20hong%20kong_www.artwallpaperhi.com_18.jpg" }}>
            <View style={styles.back}>
              <TouchableOpacity>
                <Icons name="arrow-back" size={25} color="#ffffff" />
              </TouchableOpacity>
            </View>
            <Image style={styles.subHeaderImage} borderRadius={55} source={{ uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Albert_Einstein_1947.jpg/220px-Albert_Einstein_1947.jpg" }} />
          </Image>

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "white"
    },
    headerImage: {
        height: height(150),
        width: deviceWidth
    },
    subHeaderImage: {
        height: 110,
        width: 110,
        marginTop: height(35),
        marginLeft: width(25),
        borderColor: "white",
        borderWidth: 2,
        zIndex: 5
    },

Answer 3

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';


export default class App extends Component {
  render() {
    return (
       <View>// you need to wrap the two Views an another View
          <View style={styles.box1}></View>
          <View style={styles.box2}></View>
       </View> 
    );
  }
}

const styles = StyleSheet.create({
  box1:{
    height:100,
    width:100,
    backgroundColor:'red'
  },
  box2:{
    height:100,
    width:100,
    backgroundColor:'green',
    position: 'absolute',
    top:10,
    left:30

  },
});

Answer 4

上述解决方案不适用于我。我通过创建与父级具有相同背景色的View来解决此问题，并添加了负边距使图像向上移动。

<ScrollView style={{ backgroundColor: 'blue' }}>
  <View
    style={{
      width: '95%',
      paddingLeft: '5%',
      marginTop: 80,
      height: 800,
    }}>
    <View style={{ backgroundColor: 'white' }}>

      <Thumbnail square large source={{uri: uri}} style={{ marginTop: -30 }}/>
      <Text>Some Text</Text>
    </View>
  </View>
</ScrollView>

我得到了以下结果。

Answer 5

如果您不介意阴影，您可以为 Android 使用高程属性。

{
  elevation:1
} 

Answer 6

您可以使用此OverlayContainer。诀窍是使用absolute大小的100%

// @flow

import React from 'react'
import { View, StyleSheet } from 'react-native'

type Props = {
  behind: React.Component,
  front: React.Component,
  under: React.Component
}

// Show something on top of other
export default class OverlayContainer extends React.Component<Props> {
  render() {
    const { behind, front, under } = this.props

    return (
      <View style={styles.container}>
        <View style={styles.center}>
          <View style={styles.behind}>
            {behind}
          </View>
          {front}
        </View>
        {under}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    height: 100,
    justifyContent: 'center',
  },
  center: {
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  behind: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    left: 0,
    top: 0,
    width: '100%',
    height: '100%'
  }
})

Answer 7

最简单的方法是负边距。

const deviceWidth = RN.Dimensions.get('window').width

a: {
  alignItems: 'center',
  backgroundColor: 'blue',
  width: deviceWidth,
},
b: {
  marginTop: -16,
  marginStart: 20,
},

Answer 8

<SafeAreaView style={{ flex: 1 }} >
  <View style={{ height: Dimensions.get('window').height / 2, backgroundColor: 'blue', justifyContent: 'center' }}>
    <Text style={{ fontSize: 25, alignSelf: 'center' }} >A</Text>
      <View style={{ justifyContent: 'center', height: 100, width: 100, backgroundColor: 'yellow', position: 'absolute', left: 20, top: Dimensions.get('window').height / 2 - 70 }}>
        <Text style={{ fontSize: 22, alignSelf: 'center' }} >B</Text>
      </View>
  </View>
</SafeAreaView>

Answer 9

试试这个：

<块引用>

style = {{position: 'absolute', bottom: 20, left: 20, height: 100}}