我的图片为什么不显示-本机反应 [英] How come my image is not showing - react native

问题描述

我想知道为什么我的图像没有显示，我尝试了几件事，但仍然找不到解决方案，我将其与一些教程进行了比较.我想要的是图像在背景中，底部有两个按钮，位于图像上方.我正在使用本机响应，并为应用程序提供了IDE'Deco'.现在根本没有图像显示.

I was wondering why my image is not showing, I have tried several things but still can not find the solutions, I have compared it to several tutorials. What I want is for my image to be in the background with my two buttons on the bottom, over the image. I am using react native, with the IDE 'Deco' for apps. Right now there is no image showing at all.

  import React, { Component } from 'react';
import { Button,Alert, TouchableOpacity,Image, Dimensions } from 'react-native'

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

class Project extends Component {
  render() {
    return (
      <View style={{backgroundColor: '#375D81', flex: 1}}>
        <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006_edit_1.jpg'}}/>
         <View style = {styles.container}>
           <TouchableOpacity style = {styles.buttonText1} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text style={styles.text}> 
              Button 1
             </Text>
           </TouchableOpacity>

           <TouchableOpacity style = {styles.buttonText2} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text style= {styles.text}>
              Button 2
             </Text>
           </TouchableOpacity>

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
 main: {
   backgroundColor: 'blue'
 },
 text: {
 alignItems : 'center'

 },
 container: {
  alignItems: 'center',
  flex: 1,
 },
  buttonText1: {
      borderWidth: 1,
      padding: 25,      
      borderColor: 'black',
      backgroundColor: '#C4D7ED',
      alignItems: 'center',
      position: 'absolute',
      bottom: 0,
      width: Dimensions.get('window').width / 2,
      height: Dimensions.get('window').height / 8,
      left: 0,
   },
    buttonText2: {
      borderWidth: 1,
      padding: 25,      
      borderColor: 'black',
      backgroundColor: '#C4D7ED',
      alignItems: 'center',
      position: 'absolute',
      bottom: 0,
      width: Dimensions.get('window').width / 2,
      height: Dimensions.get('window').height / 8,
      right: 0,
   }
});

AppRegistry.registerComponent('Project', () => Project);

谢谢.

推荐答案

为图像设置一些宽度和高度.

make some width and height for the image..

 <Image
   style={{width: 50, height: 50}}
   source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
   resizeMode={'cover'} // cover or contain its upto you view look
   />

尝试取消删除此内容...

我在这里提到宽度和高度...您可以将其设置为"100％" ...

Here i mentioned width and height... you can make it '100%' its upto you...

这篇关于我的图片为什么不显示-本机反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！