我的汉堡菜单行未对齐该怎么做

Question

我的汉堡包在屏幕上没有对齐

我已经访问了不同的样式方法，例如alignItems，但仍然没有结果。 关于边距定位 我不能进一步向左分隔每行(所有 3 行(大约 2 px。主要问题是每条线的水平对齐。

有人可以帮忙吗？

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);

Answer 1

我建议为此使用React-native-vector-icon。

但是如果你想自己实现它，在你的渲染函数中做这个改变

render() {
  return(
    <View>
      <View style={menuIcon.mainLine}></View>
      <View style={menuIcon.line2}></View>
      <View style={menuIcon.line3}></View>
    </View>
  ) 
}

Answer 2

通常我们不会自己编写汉堡包代码..或任何其他按钮图标。

我们在视图中使用图标或图像，并在视图本身上应用

对于 React-Native，我们使用 React-native-vector-icons 库。此处安装基本使用指南

https://www.npmjs.com/package/react-native-vector-icons