如何修复 react-native 中导入的 .js 文件？

Question

我编写了一个简单的 React Native 应用程序，它应该在第一个屏幕上显示两个背景，一个是相互叠加的。应用程序运行但它只显示一个空白的白色屏幕。我已经从 App.js 文件中的 './src/components/login' 导入 login.js 文件，但它在屏幕上除了白色之外没有显示任何内容？

我需要安装任何其他依赖项来连接 react-native 中导入的 .js 文件吗？我正在使用 react-native-cli: 2.0.1 react-native: 0.57.8 和 android studio 3.2 的工具。

.src/components/login

import React, { Component } from 'react';
import { AppRegister, StyleSheet, Text, View, Image } from 'react-native';

export default class Login extends Component {
  render() {
    return (
        <View style = {styles.container}>
           <View style = {styles.backgroundContainer}>
              <Image style = {styles.backdrop} source = {require('../../images/vape.jpg')} resizeMode = 'cover'/>
           </View>
           <View style = { styles.overlay}>
                <Image
                    style={styles.logo}
                    source={require('../../images/smoke.jpg')}/>
                <Text style={styles.title}>Ada Smoke Shop</Text>
           </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems: 'center',
  },
  backgroundContainer: {
    flex:1,
    position: 'absolute',
    top:0,
    bottom:0,
    left:0,
    right:0
  },
  overlay: {
    opacity: 0.5,
    backgroundColor: '#000000',
    flexDirection: 'column',
    top:100
  },
  logoContainer: {
    alignItems: 'center',
    flexGrow: 1,
    justifyContent: 'center',
  },
  logo: {
    backgroundColor: '#000000',
    top:150,
    left: 50,
    width: 200,
    height: 200
  },
  backdrop: {
  flex:1,

},
title: {
    color: '#B03A2E',
    marginTop:150,
    width:300,
    height:300,
    fontSize: 30,
    fontStyle: 'italic',
    fontFamily: 'Baskerville',
    textAlign: 'center',
    opacity: 10
  },
});

App.js

import React, { Component } from 'react';
import { AppRegister, StyleSheet, Text, View, Image } from 'react-native';

import login from './src/components/login';


export default class App extends Component {
  render() {
    return (
      <View style = {styles.container}>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems: 'center'
  }
});

Answer 1

Login 组件已导入，但未使用。您在 App.js 中的 render 应该是这样的：

render() {
    return (
      <View style = {styles.container}>
        <Login /> 
      </View>
    );
  }