我想知道为什么我的图像没有显示出来.我想要的是让我的图像在背景中,我的两个按钮在底部,在图像上方.我使用react native,IDE"Deco"用于应用程序.现在根本没有图像显示:

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

推荐答案

为图片留出一些宽度和高度..

 <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
   />

Try to undesrtand this...

这里我提到了宽度和高度...你可以让它"100%"由你决定...

React-native相关问答推荐

AWS Amplify处理后端错误

如何运行 React-Native 示例?

React-navigation:增加底部标签导航的高度?

在 react-native 中调试原生 java 代码

自从升级到 Xcode 10.2 我不能再通过 cli 运行 react-native run-ios

如何在 react-native 中在图像周围添加阴影

如何在 React Native 中访问原生 UI 组件的实例方法

如何在 React Native 中模拟align-items:baseline?

有没有办法改变 IOS 标题上react-navigation 的默认后退按钮 colored颜色 ?

React Native 元素搜索栏边界线未清除

是否可以将 Image.getSize 与静态图像文件一起使用?

React Native 检测点击 View

任务在 react-native 中因请求而成为orphaned - 这是什么意思?

按钮的标题属性必须是字符串

在不使用 3rd 方库的情况下,在react-native中显示主屏幕之前显示启动画面

Node.js 在 React-Native 中的作用是什么?

在 ReactNative 中单击按钮时如何获取 TextInput 中的值

如何将 jest 测试移动到 /test 文件夹并让它们运行?

React Native font outline / textShadow

react-native 开始给出 Invalid 正则表达式无效错误