反應原生導航不能顯示堆棧導航器中的光圖像

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