React native 渲染文本将“我的菜单”图标进一步推到顶部如何稳定其位置？

我有一个菜单图标，我想保持在我指定的特定位置，但如果我写一个文本，它会上升，是否有任何道具可以稳定它，或者它与渲染部分或其他东西有关

我试着玩弄我的样式表，这就是我如何找到问题的根源

菜单按钮代码：

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

从“React”导入React；
从“react native”导入{AppRegistry，StyleSheet，View}；
从“反应本机矢量图标/Ionicons”导入图标
从“react native responsive screen”导入{widthPercentageToDP作为wp，heightPercentageToDP作为hp}
导出默认类菜单按钮扩展React.Component{
render（）{
返回(
this.props.navigation.openDrawer（）}/>
) 
}
}
AppRegistry.registerComponent（'菜单'，（）=>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,
    }
});

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“/MenuButton”导入菜单按钮
导出默认类设置屏幕扩展React.Component{
render（）{
返回(
设置
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“rgba（215215215,1）”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
正文：{
尺寸：30，
}
});

您必须更改“设置”页面中的视图顺序。最后放置绝对定位视图

在菜单按钮中，您不需要在视图中包装图标。如果在视图中包装图标，则图标将定位到该视图，而不设置页面视图。我已经更改了图标的顶部和左侧值

菜单按钮代码

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

从“React”导入React；
从“react native”导入{AppRegistry，StyleSheet，View}；
从“反应本机矢量图标/离子图标”导入图标；
进口{
宽度百分比TODP作为wp，
高度百分比TODP作为hp
}从“反应本机响应屏幕”；
导出默认类菜单按钮扩展React.Component{
render（）{
返回(
this.props.navigation.openDrawer（）}
/>
);
}
}
AppRegistry.registerComponent（“菜单”，（）=>FixedDimensionsBasics）；

设置页面代码

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

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“/MenuButton”导入菜单按钮；
导出默认类设置屏幕扩展React.Component{
render（）{
返回(
设置
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“rgba（215215215,1）”，
对齐项目：“中心”，
为内容辩护：“中心”
},
正文：{
尺寸：30
}
});

解决了这个问题，删除alignItems:'center'并将alignSelf:'center'单独指定给菜单按钮

现在它有相反的效果，每次我写更多或增加字体大小，它都会下降