React-Native-下方绝对位置视图中的文本在上方绝对位置视图中可见

时间:2019-10-22 15:24:22

标签: react-native

我有两个带有“文本”组件的视图。两者都是绝对的位置。第二个视图位于第一个视图上方。第二个视图已翻译,足以覆盖文本。不幸的是,在App中,当在android模拟器中进行测试时,第二个视图的文本也是可见的,就像它具有较高的zIndex一样。

我无法在零食中重现此问题。在零食中,相同的代码可以正常工作。 (我没有使用expo client)

还有什么我想念的吗?

<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
 <View style={{flex: 1, backgroundColor: 'purple', marginLeft: 10}}>
  <View 
    style={{ 
      position: "absolute", height: 200, 
      width: '90%', marginTop: 50, backgroundColor:'skyblue',
      shadowOffset: { height: 5, width: 0 }, shadowColor: "#000", 
      shadowOpacity: 1, shadowRadius: 10, elevation: 1,
    }}
  >
    <Text style={{fontSize: 18, paddingVertical: 10, paddingHorizontal: 30}}>
      Texts are here
    </Text>
  </View>
  <View 
    style={{
      position: "absolute", height: 200, width: '80%', marginTop: 90, backgroundColor:'blue',
      shadowOffset: { height: 5, width: 0 }, shadowColor: "#000", shadowOpacity: 1, shadowRadius: 10, elevation: 1,
      transform:[{translateY: -30}]
    }}>
    <Text style={{fontSize: 18, paddingVertical: 10, paddingHorizontal: 30}}>
      Next Texts
    </Text>       
  </View>
</View>

0 个答案:

没有答案