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

render组件已导入，但未使用。您在App.js中的render() { return ( <View style = {styles.container}> <Login /> </View> ); }应该是这样的：

Model

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

1 个答案: