如何设置组件的样式以隐藏在另一个组件后面答案

【问题标题】：How to style a component to hide behind another component如何设置组件的样式以隐藏在另一个组件后面
【发布时间】：2020-07-19 01:49:48
【问题描述】：

我对本机反应很陌生，我试图了解如何设置两个组件的样式以相互拦截。最好让一个组件在另一个组件后面移动，就好像它们是 Photoshop 中的图层一样。我想实现这一点，以便我可以为隐藏组件的样式设置动画，以便在按下可触摸的不透明度时自行显示。但我对动画很好，我不需要任何帮助。我只需要指导如何正确设置组件的样式以隐藏在另一个组件后面。

这是我正在使用的两个组件，一个包含在可触摸不透明度（文本框）内的文本组件，以及一个发布日期文本组件。两者都包含在主视图组件中。

<View style={styles.contentContainer}>
    <View style={styles.dateContainer}>
        <Text style={styles.dateText}>a few seconds ago</Text>
    </View>
    <TouchableOpacity onPress={() => {}}>
        <Text style={styles.item}>this is some text input</Text>
    </TouchableOpacity>
</View>



const styles = StyleSheet.create({
    contentContainer: {
        flex: 1,
    },
    item: {
        padding: 16,
        fontWeight: 'bold',
        borderColor: '#bbb',
        borderWidth: 1,
        borderStyle: 'solid',
        borderRadius: 10,
    },
    dateContainer: {
        flex: 1,
        paddingHorizontal: 2,
        marginTop: 16,
        alignSelf: 'flex-end',
    },
    dateText: {
        color: '#adadad',
    },
});

【问题讨论】：

标签： react-native

【解决方案1】：

您可以在样式中使用 position:'absolute' 和 zIndex 来设置视图层。下面的样式会将 dateContainer 放置在文本组件上方和文本组件的角落。您可以使用左、右、上或下定位视图。

 dateContainer: {
    position: 'absolute',
    flex: 1,
    paddingHorizontal: 2,
    top: 30,
    alignSelf: 'flex-end',
    zIndex: 1000,
  },

【讨论】：