社区首页 >问答首页 >渲染文本会将我的菜单图标进一步推到顶部如何稳定其位置？

问渲染文本会将我的菜单图标进一步推到顶部如何稳定其位置？
EN

Stack Overflow用户

提问于 2019-05-02 03:32:39

回答 2查看 24关注 0票数 0

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

我试着摆弄我的样式表，这就是我从哪里找出问题的原因

菜单按钮代码：

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

react-native

position

styles

frontend

回答 2

Stack Overflow用户

发布于 2019-05-02 06:47:09

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

在菜单按钮中，你不需要在View.If中包装图标，你在视图中包装图标，然后图标将定位到该视图，而不是设置页面视图。我已经更改了图标的顶部和左侧的值。

菜单按钮代码

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