Question

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

如果发现图像是深色背景（如https://tctechcrunch2011.files.wordpress.com/2015/09/react-native.png?w=738之类的那样），它会显示得很好，而如果它是常规图像，它就不会显示（{{3} }）。我不知道如何解决问题。如果有任何关于如何使其工作的提示或建议。我真的很感激。

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

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

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

反应原生导航无法在堆栈导航器中显示光图像

1 个答案: