十字按钮反应原生答案

【问题标题】：Cross button react-native十字按钮反应原生
【发布时间】：2022-01-19 14:47:12
【问题描述】：

我认为这很容易制作，但我似乎无法让它看起来正确，我只想要一个 X 按钮 - 创建了 2 个 45 度旋转的视图，但由于某种原因它们看起来不等长。

Header.js

<View style={styles.hamburgerContainer}>
    <View style={[styles.hamburgerLine, styles.crossLine1]}></View>
    <View style={[styles.hamburgerLine, styles.crossLine2]}></View>
</View>

const styles = StyleSheet.create({
  hamburgerContainer: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
},
hamburgerLine: {
    height: 3,
    width: 30,
    marginVertical: 3,
    backgroundColor: Colors.primary,
},
crossLine1: {
    marginVertical: 0,
    transform: [{rotate: '45deg'}],
},
crossLine2: {
    marginVertical: 0,
    transform: [{rotate: '-45deg'}],
},

})

结果：

在这里感谢任何帮助

【问题讨论】：

标签： css react-native

【解决方案1】：

将线的位置设为绝对位置，以便它们从同一轴开始并可以重叠：

hamburgerLine: {
    height: 10,
    width: 300,
    marginVertical: 3,
    backgroundColor: Colors.primary,
    position: 'absolute' //add this
},

【讨论】：

是的，谢谢 - 认为缺少一些东西