Экран не отображает два компонента импортированных файлов - PullRequest
Новая
       28

Экран не отображает два компонента импортированных файлов

0 голосов
/ 29 апреля 2019

Я пытался отобразить MenuButton и SideBar, которые хорошо работают при индивидуальном тестировании, на пустой странице с именем SettingScreen.на основании некоторых ситуаций либо показывает боковую панель, либо ничего, только если реализована одна только кнопка MenuButton.

После нескольких испытаний я понял, что свойство alignItems позволяет отображать MenuButton, если оно реализовано без SideBar, но исключеноSideBar, и если оба реализованы без наличия alignItems, то отображается только 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);

Боковая панель: 

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',

    }

});

с этим кодом результат будет пустой страницей

...