Блог

Главная - Вопросы по программированию - Строки меню моего гамбургера не выровнены, что делать

Строки меню моего гамбургера не выровнены, что делать

#css #iphone #react-native #frontend #hamburger-menu

#css #iPhone #react-native #интерфейс #гамбургер-меню

Вопрос:

Мои гамбургеры не выравниваются на экране

Я посещал разные методы стиля, такие как 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);

Ответ №1:

для этого я рекомендую использовать react-native-vector-icons.

но если вы хотите реализовать это самостоятельно, внесите эти изменения в свою функцию рендеринга

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

Ответ №2:

обычно мы не пишем код гамбургера самостоятельно .. или любые другие значки кнопок.

Мы используем значки или изображения внутри view и применяем onPress к самому view

с react-native мы используем библиотеку react-native-vector-icons. Основное руководство по установке и использованию здесь

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

Комментарии:

1. Да, я это знаю, но в данном случае я разработал иконки, поэтому я хотел бы знать, как рисовать и позиционировать их непосредственно после экспорта моих файлов CSS-дизайна

2. сначала оберните все три строки в единый вид с помощью width и height и flexDirection = cloumn .. затем… внутри этого напишите свои line1,2,3 и правильно выровняйте их.

3. и то, что вы делаете, это … построение flex1 затем внутри flex1.. построение flex2 .. затем внутри flex2 .. построение flex 3

4. итак, создайте контейнер с помощью .. высота и ширина … затем внутри контейнера вы можете нарисовать все три строки… и используйте доступное пространство с помощью flex1.. с некоторой высотой