反应本机样式

Question

我试图了解有关React Native中样式的更多信息。

将元素拖到底部容器（黄色）中时，该元素位于下方。

//View

  <View style={styles.container}>
    <View style={styles.itemContainer}>
      <DraggingItem />
    </View>
    <View style={styles.dropContainer}>
           //2nd container
    </View>
  </View>


//STYLING

  container: {
    flex: 1,
    backgroundColor: '#fff',
  },

  itemContainer: {
    backgroundColor: 'green',
    height: (window.height*56)/100,
  },

  dropContainer: {
    flex: 1,
    backgroundColor: 'yellow',
    height: (window.height*40)/100,
  },

//项目样式

 text: {
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    // alignItems: 'center',
    // justifyContent: 'center',
    textAlign: 'center',
    color: "#fff"
  },

  item: {
    backgroundColor: "red",
    width: window.width,
    height: 80,
    borderRadius: 15
  }

Answer 1

您可以尝试zIndex并详细了解它hear。如果zIndex（如果您的黄色框大于红色框），则事情就像图像中那样发生。如果您不想要它，请给红色一个较大的zIndex。