我想知道为什么我的图片没有显示。我想要的是我的图像位于背景中,底部有两个按钮,位于图像上方。我正在使用 native react ,使用 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);
最佳答案
如果在 ios 14 或 xcode 12 中发生这种情况,您必须将 react native 升级到 0.63.2 react-native 版本中存在一个错误。
要修补低于 0.63.2 的 RN 版本的问题,请将此添加到 Podfile
的末尾。
pre_install do |installer|
puts("Image fix for ios14: remove this when upgradeing to >= 0.63.3")
find = "_currentFrame.CGImage;"
replace = "_currentFrame.CGImage ;} else { [super displayLayer:layer];"
op = `sed -ie "s/#{find}/#{replace}/" ../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m`
puts("Image fix for ios14 done")
end
然后运行pod install
或者,如果您想要一个基于包的解决方案,您可以使用 https://www.npmjs.com/package/react-native-fix-image .如果您正在使用它,建议将其添加为 npm 安装后脚本。
无需编辑 node_modules。
关于android - React Native Image 不显示,我该如何解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47035899/