ImageBackground在某些​​设备上未显示图像

Question

我正在尝试将CustomCallout与ImageBackground一起使用。在两个不同的设备（均为Android）上测试应用程序时，我注意到一个非常奇怪的行为。图像可以在较低显示的旧设备上正确显示，但是在新设备（p30 lite）上没有出现图像。这是我的代码：

class CustomCallout extends React.Component {
      constructor(props) {
        super(props);        
      }


  render() {
    return (

      <View style={styles.calloutStyle}>
        <View>
          <View style={{ ...styles.placeRow, ...styles.placeHeader }}>

            <ImageBackground
              source={{ uri: this.props.image }}
              style={styles.bgImage}
            >
              <View style={styles.titleContainer}>
                <Text style={styles.title} numberOfLines={1}>
                  {this.props.placeName}
                </Text>
              </View>
            </ImageBackground>

          </View>
          <View style={{ ...styles.placeRow, ...styles.placeDetail }}>
            <Text>{this.props.distance}m</Text>
            <Text>{this.getPlaceType(this.props.placeType)}</Text>
          </View>
          <View style={{ ...styles.placeRow, ...styles.placeRating }}>
              <StarRating
                disabled={false}
                emptyStar={'ios-star-outline'}
                fullStar={'ios-star'}
                halfStar={'ios-star-half'}
                iconSet={'Ionicons'}
                maxStars={7}
                rating={4}                
                fullStarColor={'#FDCC0D'}
                starSize={20}
              />
          </View>
        </View>                 
      </View>

    );
  }
}

CustomCallout.propTypes = propTypes;

const styles = StyleSheet.create({
  calloutStyle: {
    height: 200,
    width: 280,
    backgroundColor: '#61adc8',
    shadowOffset: { width: 0, height: 2},
    shadowRadius: 6,
    shadowOpacity: 0.26,
    elevation: 55,
    padding: 12,
    borderRadius: 20,
    shadowColor: 'black',
    overflow: 'hidden'
  },
   bgImage: {
    width: '100%',
    height: '100%',
    justifyContent: 'flex-end',
  },
  placeRow: {
    flexDirection: 'row'
  },
  placeHeader: {
    height: '80%'
  },
  placeDetail: {
    justifyContent: 'space-between',    
    height: '10%'
  },
  placeRating: {   
    height: '10%',
    justifyContent:'flex-start',
  },
  titleContainer: {
    backgroundColor: 'rgba(0,0,0,0.5)',
    shadowOffset: { width: 0, height: 2},
    shadowRadius: 6,
    shadowOpacity: 0.26,
    elevation: 55,    
    borderRadius: 10,
    alignItems: 'center'
  },
  title: {        
    color: 'white',
    fontSize: 20
  }
});

export default CustomCallout;

Answer 1

我们不能将ImageBackground放置在我们想要的任何地方。.我不知道确切的理论。但是只要将ImageBackgroung标签放在视图之外，甚至还要尝试放在其他视图上。如果有人知道请纠正我。这是一个有效的示例。

将ImageBackground放置到整个组件中

render() {
    return (

      <View style={styles.calloutStyle}>
        <View>

            <ImageBackground
              source={{ uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg' }}
              style={styles.bgImage}
            >
          <View style={{ ...styles.placeRow, ...styles.placeHeader }}>

              <View style={styles.titleContainer}>
                <Text style={styles.title} numberOfLines={1}>
                  {this.props.placeName}
                </Text>
              </View>

          </View>

            </ImageBackground>
          <View style={{ ...styles.placeRow, ...styles.placeDetail }}>
            <Text>{this.props.distance}m</Text>
            <Text>{this.getPlaceType(this.props.placeType)}</Text>
          </View>
          <View style={{ ...styles.placeRow, ...styles.placeRating }}>
              <StarRating
                disabled={false}
                emptyStar={'ios-star-outline'}
                fullStar={'ios-star'}
                halfStar={'ios-star-half'}
                iconSet={'Ionicons'}
                maxStars={7}
                rating={4}                
                fullStarColor={'#FDCC0D'}
                starSize={20}
              />
          </View>

        </View>                 
      </View>

    );
  }
}

或者您可以只放两个组件

render() {
    return (

      <View style={styles.calloutStyle}>
        <View>

            <ImageBackground
              source={{ uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg' }}
              style={styles.bgImage}
            >
          <View style={{ ...styles.placeRow, ...styles.placeHeader }}>

              <View style={styles.titleContainer}>
                <Text style={styles.title} numberOfLines={1}>
                  {this.props.placeName}
                </Text>
              </View>

          </View>
          <View style={{ ...styles.placeRow, ...styles.placeDetail }}>
            <Text>{this.props.distance}m</Text>
            <Text>{this.getPlaceType(this.props.placeType)}</Text>
          </View>
          <View style={{ ...styles.placeRow, ...styles.placeRating }}>
              <StarRating
                disabled={false}
                emptyStar={'ios-star-outline'}
                fullStar={'ios-star'}
                halfStar={'ios-star-half'}
                iconSet={'Ionicons'}
                maxStars={7}
                rating={4}                
                fullStarColor={'#FDCC0D'}
                starSize={20}
              />
          </View>

            </ImageBackground>
        </View>                 
      </View>

    );
  }
}

或仅将ImageBackground置于内部视图

render() {
    return (

      <View style={styles.calloutStyle}>
        <View>

            <ImageBackground
              source={{ uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg' }}
              style={styles.bgImage}
            >
          <View style={{ ...styles.placeRow, ...styles.placeHeader }}>

              <View style={styles.titleContainer}>
                <Text style={styles.title} numberOfLines={1}>
                  {this.props.placeName}
                </Text>
              </View>

          </View>

            </ImageBackground>
          <View style={{ ...styles.placeRow, ...styles.placeDetail }}>
            <Text>{this.props.distance}m</Text>
            <Text>{this.getPlaceType(this.props.placeType)}</Text>
          </View>
          <View style={{ ...styles.placeRow, ...styles.placeRating }}>
              <StarRating
                disabled={false}
                emptyStar={'ios-star-outline'}
                fullStar={'ios-star'}
                halfStar={'ios-star-half'}
                iconSet={'Ionicons'}
                maxStars={7}
                rating={4}                
                fullStarColor={'#FDCC0D'}
                starSize={20}
              />
          </View>

        </View>                 
      </View>

    );
  }
}

尝试一下，让我知道结果..：）