Question

我想知道为什么我的图像没有显示，我已经尝试了几个但仍然无法找到解决方案，我已经将它与几个教程进行了比较。我想要的是我的图像在背景中，底部有两个按钮，在图像上方。我正在使用本机反应，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);

提前谢谢。

Answer 1

如果这是在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

无需编辑node_modules。

Answer 2

为图像制作一些宽度和高度..

 <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％'直到你......

Answer 3

更新IOS 14.x 后，正在生成一个问题，即未显示图像。这是一些有关此的信息。

添加[super displayLayer：layer]后可以显示图像；如果_currentFrame为nil

如果我理解正确，_currentFrame应该用于动画图像，因此，如果它是静止图像，我们可以使用UIImage实现来处理图像渲染，不确定是否正确。

node_modules / react-native / Libraries / Image / RCTUIImageViewAnimated.m

if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Answer 4

您需要指定尺寸：

  <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006_edit_1.jpg'}} style={{ resizeMode: 'cover', width: '100%', height: '100%' }}/>

Answer 5

这个对我有用

blogger

为什么我的形象没有显示 - 反应原生

5 个答案: