Пустой экран: не видно мой дизайн из импортированного файла - PullRequest
Новая
       42

Пустой экран: не видно мой дизайн из импортированного файла

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

Я не могу увидеть свой дизайн из импортированного файла, все, что я вижу, это цвет фона страницы настроек

Я попытался изменить контейнеры и добавить другие файлы внутри. Как вы увидите, есть два набора кода, первый из которых представляет собой кнопку меню, где ожидаемый дизайн должен быть белой линией, а второй - страницу настроек 

import React from 'react';
import {StyleSheet, View} from "react-native" ;
export default class MenuButton extends React.Component {
    render() {
        return(
        <View lines={line.menuIcon}>
            </View>
        ) 
    }
}

const line = StyleSheet.create({
    menuIcon: {
        flex: 1,
backgroundColor : 'rgba(215, 215, 215, 1)',
top  : 4,
height              : 1,
width               : 6,
  position            : 'absolute',
  margin              : 0,
  left                : 0,
   borderRadius       : 0,
  borderStyle        : 'solid',
  borderWidth        : 1,
  borderColor        : 'rgba(255, 255, 255, 1)'
  }})




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

export default class SettingScreen extends React.Component{
    render(){
        return(
            <View style={styles.container}>
            <MenuButton/>
            <Text style={styles.text}>Settings</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.0)',
        alignItems: 'center',
        justifyContent: 'center',
    },
text:{
    fontSize: 30,
    }
});

1 Ответ

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

@ Camille Basbous Я думаю, вы ошиблись в своем файле MenuButton.Просто измените ваш lines={line.menuIcon} на style={line.menuIcon}

import React from 'react';
import {StyleSheet, View} from "react-native" ;
export default class MenuButton extends React.Component {
    render() {
        return(
        <View style={line.menuIcon}>//<-----here you have used lines instead of styles
            </View>
        ) 
    }
}

Второй вам дано backgroundColor: 'rgba(0,0,0,0.0)' в SettingScreen означает черный цвет с альфа 0, к сожалению, белый.и цвет границы вашего файла MenuButton также borderColor : 'rgba(255, 255, 255, 1)' = белый.Таким образом, вы не сможете увидеть, что на вашем экране белый цвет меняется.

Я пробовал что-то с вашим кодом, только что изменил цвет и ширину вашей границы.https://snack.expo.io/rJHD74e9V

...