Рендеринг текста продвигает мой значок меню дальше вверх, как стабилизировать его положение? - PullRequest
Новая
       20

Рендеринг текста продвигает мой значок меню дальше вверх, как стабилизировать его положение?

0 голосов
/ 02 мая 2019

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

Я попытался поиграть с моей таблицей стилей, и вот как я понял, откуда проблема

Код кнопки меню: 

import React from 'react';
import {AppRegistry, StyleSheet, View} from "react-native" ;
import Icon from 'react-native-vector-icons/Ionicons'
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'



export default class MenuButton extends React.Component {
    render() {
        return(

        <View >

        <Icon name= "ios-menu" size={wp('12%')} 
        color='#9B9B9B' 
        style={{position: 'absolute', top: wp('-82.5%'), left: wp('-46%'), }}
       onPress={() => this.props.navigation.openDrawer()} />



                 </View>
        ) 
    }
}


AppRegistry.registerComponent('Menu', () => FixedDimensionsBasics);

Код страницы настроек: 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from './MenuButton'

export default class SettingScreen extends React.Component{
    render(){
        return(
            <View style={styles.container}>
            <MenuButton navigation= {this.props.navigation}/>
 <Text style={styles.text}>Settings</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(215,215,215,1)',
        alignItems: 'center',
        justifyContent: 'center',
    },
text:{
    fontSize: 30,
    }
});

Ответы [ 2 ]

1 голос
/ 02 мая 2019

Вы должны изменить порядок просмотров на странице настроек. Наконец-то разместите абсолютный позиционный вид.

В кнопке меню вам не нужно оборачивать значок в View. Если вы оборачиваете Icon в View, тогда Icon будет располагаться в этом View, а не в настройках View. Я изменил верхнее и левое значения для Icon.

Код кнопки меню 

import React from "react";
import { AppRegistry, StyleSheet, View } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp
} from "react-native-responsive-screen";

export default class MenuButton extends React.Component {
  render() {
    return (
      <Icon
        name="ios-menu"
        size={wp("12%")}
        color="#9B9B9B"
        style={{ position: "absolute", top: wp("5%"), left: wp("5%") }}
        onPress={() => this.props.navigation.openDrawer()}
      />
    );
  }
}
AppRegistry.registerComponent("Menu", () => FixedDimensionsBasics);

Код страницы настроек 

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import MenuButton from "./MenuButton";

export default class SettingScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Settings</Text>
        <MenuButton navigation={this.props.navigation} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(215,215,215,1)",
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    fontSize: 30
  }
});
0 голосов
/ 03 мая 2019

Решено, удалите alignItems: 'center' и назначьте alignSelf: 'center' исключительно для MenuButton

...