渲染文本会将我的菜单图标进一步推到顶部如何稳定其位置？
渲染文本会将我的菜单图标进一步推到顶部如何稳定其位置？
提问于 2019-05-02 11:32:39
我有一个菜单图标，我想保持在我分配给它的特定位置，但如果我写了一个文本，它会上升，是否有任何道具可以稳定它，或者它与渲染部分或其他什么相关。
我试着摆弄我的样式表，这就是我从哪里找出问题的原因
菜单按钮代码：
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
Stack Overflow用户
发布于 2019-05-02 14: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
}
});Stack Overflow用户
发布于 2019-05-03 14:30:16
解决了这个问题，删除alignItems：‘MenuButton’并将alignSelf：'center‘单独指定给alignItems
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55945318
复制相关文章
相似问题
腾讯云开发者
