如何在反应本机中修复导入的.js文件

Question

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

我是否需要安装任何其他依赖项才能在 react-native 中连接导入的.js文件？我正在使用反应本机 cli：2.0.1React-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
  },
});

应用.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>
    );
  }