我的汉堡包没有在屏幕上对齐
我访问过不同的样式方法,如alignItems,但仍然没有结果。关于边距定位我不能再进一步将每条线(所有3条线)分开约2像素。主要问题是每条线的水平对齐。
有人可以帮帮忙吗?
import React from 'react';
import {AppRegistry, StyleSheet, View} from "react-native" ;
export default class MenuButton extends React.Component {
render() {
return(
<View style={menuIcon.mainLine}>
<View style={menuIcon.line2}>
<View style={menuIcon.line3}>
</View>
</View>
</View>
)
}
}
const menuIcon = StyleSheet.create({
mainLine: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 4,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 40,
marginLeft : 25,
alignItems : "stretch",
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
},
line2: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 7,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 0,
marginLeft : 0,
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
},
line3: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 7,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 0,
marginLeft : 0,
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
}
})
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
我建议使用react-native-vector-icons。
但如果您想自己实现它,请在渲染功能中进行此更改
render() {
return(
<View>
<View style={menuIcon.mainLine}></View>
<View style={menuIcon.line2}></View>
<View style={menuIcon.line3}></View>
</View>
)
}
通常我们不会自己写汉堡包代码..或任何其他按钮图标。
我们在视图中使用图标或图像,并在视图本身上应用onPress
使用react-native,我们使用react-native-vector-icons库。在此安装基本使用指南