反应原生导航不能显示堆栈导航器中的光图像

Question

我有一个反应原生堆栈导航器屏幕，它将显示图像。

如果发现图像是黑暗的背景（类似于https://tctechcrunch2011.files.wordpress.com/2015/09/react-native.png?w=738），它将显示得很好，而如果是普通图像，则不会显示（https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRf148EuQqC90pqKVJvjraTejon1-A5OKkMuwsnBfxRDlWq1foe）。我不知道如何解决这个问题。如果有任何提示或建议如何让它工作。我真的很感激。与堆栈Navigator视图

我的示例代码如下所示：

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    // Notice these imports: 
    TextInput, 
    Image, 
    Dimensions, 
    TouchableOpacity 

} from 'react-native'; 
const screenHeight = Dimensions.get('window').height; 
const screenWidth = Dimensions.get('window').width; 

export default class AboutScreen extends Component { 
    static navigationOptions = ({navigation}) => ({ 
    title: navigation.state.params.recipe.label, 
    }); 
    render() { 
    const { goBack } = this.props.navigation; 
    const imgUrl = this.props.navigation.state.params.recipe.image; 
    console.log("imgUrl is >>>", imgUrl); 
    console.log("this.props.navigation is >>>", this.props.navigation); 
    return (
     <View style={styles.container}> 
     <View style={styles.picture}> 
      <Image 
       style={{width: 200, height: 200}} 
       source={{uri: imgUrl}} 
      /> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    picture: { 
    margin: 10, 
    height: screenWidth *0.8, 
    paddingLeft: 10, 
    backgroundColor: 'white', 
    shadowColor: "#000000", 
    shadowOpacity: 0.8, 
    shadowRadius: 2, 
    shadowOffset: { 
     height: 1, 
     width: 0 
    } 
    }, 

}); 

Answer 1

您的图像，可能无法从URI加载。您可以检查使用onError加载时可能出现的错误。

<Image 
    style={{width: 200, height: 200}} 
    source={{uri: imgUrl}} 
    onError={e=>console.log(e)} 
/> 

您是否尝试过使用资源文件夹中的需求使用与静态资源相同的图像？

<Image 
    style={{width: 200, height: 200}} 
    source={require("../path/to/your/image.jpg")} 
    onError={e=>console.log(e)} 
/>