我想知道为什么我的图像没有显示,我尝试了几种方法,但仍然找不到解决方案,我将其与一些教程进行了比较。我想要的是将图片放在背景中,底部有两个按钮,位于图片上方。我正在使用本机响应,并为应用程序提供了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%”设置为您...