Javascript 空白屏幕：can'；从导入的文件中看不到我的设计

我无法从导入的文件中看到我的设计，只能看到设置页面的背景色

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

我尝试过修改容器并在其中添加其他文件。正如您将看到的，有两组代码，第一组是菜单按钮，预期的设计应该是一条白线，第二组是设置页面

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

从“React”导入React；
从“react native”导入{StyleSheet，View}；
导出默认类菜单按钮扩展React.Component{
render（）{
返回(
) 
}
}
const line=StyleSheet.create({
menuIcon：{
弹性：1，
背景颜色：“rgba（2152152151）”，
排名：4，
身高:1,，
宽度：6，
位置：'绝对'，
保证金：0，
左:0,，
边界半径：0，
边框样式：“实心”，
边框宽度：1，
边框颜色：“rgba（255，255，255，1）”
}})
从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“./Menu/MenuButton”导入菜单按钮
导出默认类设置屏幕扩展React.Component{
render（）{
返回(
设置
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“rgba（0,0,0,0.0）”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
正文：{
尺寸：30，
}
});

@Camille Basbous我想你的菜单按钮文件有误。只需将

line={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>
        ) 
    }
}

从“React”导入React；
从“react native”导入{StyleSheet，View}；
导出默认类菜单按钮扩展React.Component{
render（）{
返回(
//@camilleBasbous你能告诉我你想要的输出吗？一个带白线的黑屏你在说什么设计？你在你的问题中只放了一个带固定文本的边界样式！