Question

我一直试图显示一个MenuButton和SideBar，它们在名为SettingScreen的空白页面上进行单独测试时效果很好。根据某些情况，SideBar不会显示或什么都不显示，只有单独实施时，MenuButton才会显示。

经过几次试验，我意识到，如果在不使用SideBar的情况下实现但取消了SideBar，则alignItems道具允许显示MenuButton，并且如果在没有alignItems的情况下都实现了MenuButton，则仅显示SideBar。我对此并不陌生，我一直想知道如何确保只有MenuButton是对齐的，并且SideBar的存在不会影响MeuButton的位置或存在。如果有更好的方法，请告诉我，谢谢。

菜单按钮：

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

        </Icon>

                 </View>
        ) 
    }
}


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

SideBar：

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



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

        <View style={styles.container}>



                 </View>
        ) 
    }
}


const styles= StyleSheet.create({
    container:{ 
         flex: 1,
        backgroundColor: '#FFFF',
       left: wp('75%'),
        width: 100,


}})

App.js：

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

export default class SettingScreen extends React.Component{
    render(){
        return(
            <View style={styles.container}>
            <MenuButton navigation= {this.props.navigation}/>
        <SideBar/>

            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#0000',
        alignItems: 'center',
        justifyContent: 'center',

    }

});

使用此代码，结果是空白页

屏幕未显示导入文件的两个组件

0 个答案: