渲染文本将我的菜单图标推到了如何稳定位置的顶部

Question

我有一个菜单图标，我想保留我分配给它的特定位置它与渲染部分或其他有关。

我尝试使用我的样式表，这就是我从

中弄清楚问题的方式

菜单按钮代码：

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

Answer 1

您必须在设置页面中更改视图顺序。最终将绝对定位的视图放置。

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

菜单按钮代码

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

Answer 2

解决了它，删除AlignItems：'Center'并任命Alignself："中心"仅对Menubutton