图片为空时如何隐藏图片的空白区域

时间:2019-05-03 20:33:28

标签: react-native-android

enter image description here

我正在做评论部分,所以如果图像为空,我想隐藏图像区域 如果图像源可用,则显示图像内容  和使用条件,如果但仍加载相同的问题图像,但空间区域是如何解决的问题,请让我知道我是本机新手

并使用了许多参考,但仍然是同一问题

   import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
  FlatList,
  BackHandler
} from 'react-native';
import { Container, Content, Icon, Header, Left, Body, Right, Segment, Button } from 'native-base'
import ImageLoad from 'react-native-image-placeholder';


export default class CommentScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data:[
        {id:1, image: "https://bootdey.com/img/Content/avatar/avatar1.png", name:"Frank Odalthh",    comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor." , ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
        {id:2, image: "https://bootdey.com/img/Content/avatar/avatar6.png", name:"John DoeLink",     comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor." , ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
        {id:3, image: "https://bootdey.com/img/Content/avatar/avatar7.png", name:"March SoulLaComa", comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
        {id:4, image: "https://bootdey.com/img/Content/avatar/avatar2.png", name:"Finn DoRemiFaso",  comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
        {id:5, image: "https://bootdey.com/img/Content/avatar/avatar3.png", name:"Maria More More",  comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
        {id:6, image: "https://bootdey.com/img/Content/avatar/avatar4.png", name:"Clark June Boom!", comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl: null },
        {id:7, image: "https://bootdey.com/img/Content/avatar/avatar5.png", name:"The googler",      comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl: null},
      ]
    }
  }
componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backPressed);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.backPressed);
}

backPressed = () => {
    this.props.navigation.navigate('App');
    return true;
}
   static navigationOptions = { header: null }

  render() {
    return (
      <FlatList
        style={styles.root}
        data={this.state.data}
        extraData={this.state}
        ItemSeparatorComponent={() => {
          return (
            <View style={styles.separator}/>
          )
        }}
        keyExtractor={(item)=>{
          return item.id.toString();
        }}
        renderItem={(item) => {
          const Notification = item.item;
          return(
            <View style={styles.container}>
              <TouchableOpacity onPress={() => {}}>
                <Image style={styles.image} source={{uri: Notification.image}}/>
              </TouchableOpacity>
              <View style={styles.content}>
                <View style={styles.contentHeader}>
                  <Text  style={styles.name}>{Notification.name}</Text>
                  <Text style={styles.time}>
                    9:58 am
                  </Text>
                </View>
                <Text rkType='primary3 mediumLine'>{Notification.comment}</Text> 
                <View>

            <ImageLoad style={{width:150, height:140}}  source={{uri: Notification.ImageUrl}}/>
</View>
              </View>
            </View>
          );
        }}/>
    );
  }
}

1 个答案:

答案 0 :(得分:0)

您可以使用defaultSource属性或在没有网址的情况下使用默认图片。

或者您可以尝试不渲染它:

{Notification.ImageUrl? <ImageLoad style={{width:150, height:140}}  source={{uri: Notification.ImageUrl}}/> : null}

假设没有图片时,Notification.image为空。

已编辑 您的代码以及建议的内容。请注意,这里没有注释,没有样式。但它正在工作。 欢呼

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
ScrollView,
FlatList,
BackHandler
} from 'react-native';
// import { Container, Content, Icon, Header, Left, Body, Right, Segment, Button } from 'native-base'
import ImageLoad from 'react-native-image-placeholder';


export default class CommentScreen extends Component {

constructor(props) {
 super(props);
 this.state = {
   data:[
     {id:1, image: "https://bootdey.com/img/Content/avatar/avatar1.png", name:"Frank Odalthh",    comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor." , ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
     {id:2, image: "https://bootdey.com/img/Content/avatar/avatar6.png", name:"John DoeLink",     comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor." , ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
     {id:3, image: "https://bootdey.com/img/Content/avatar/avatar7.png", name:"March SoulLaComa", comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
     {id:4, image: "https://bootdey.com/img/Content/avatar/avatar2.png", name:"Finn DoRemiFaso",  comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
     {id:5, image: "https://bootdey.com/img/Content/avatar/avatar3.png", name:"Maria More More",  comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl:"https://lorempixel.com/400/200/nature/5/"},
     {id:6, image: "https://bootdey.com/img/Content/avatar/avatar4.png", name:"Clark June Boom!", comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl: null },
     {id:7, image: "https://bootdey.com/img/Content/avatar/avatar5.png", name:"The googler",      comment:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",  ImageUrl: null},
   ]
 }
}
componentWillMount() {
 BackHandler.addEventListener('hardwareBackPress', this.backPressed);
}

componentWillUnmount() {
 BackHandler.removeEventListener('hardwareBackPress', this.backPressed);
}

backPressed = () => {
 this.props.navigation.navigate('App');
 return true;
}
static navigationOptions = { header: null }

render() {
 return (
   <FlatList
     style={styles.root}
     data={this.state.data}
     extraData={this.state}
     ItemSeparatorComponent={() => {
       return (
         <View style={styles.separator}/>
       )
     }}
     keyExtractor={(item)=>{
       return item.id.toString();
     }}
     renderItem={(item) => {
       const Notification = item.item;
       return(
         <View style={styles.container}>
           <TouchableOpacity onPress={() => {}}>
             <Image style={styles.image} source={{uri: Notification.image}}/>
           </TouchableOpacity>
           <View style={styles.content}>
             <View style={styles.contentHeader}>
               <Text  style={styles.name}>{Notification.name}</Text>
               <Text style={styles.time}>
                 9:58 am
               </Text>
             </View>
             <Text rkType='primary3 mediumLine'>{Notification.comment}</Text>
             <View>
             {Notification.ImageUrl? <ImageLoad style={{width:150, height:140}}  source={{uri: Notification.ImageUrl}}/>: null}

</View>
           </View>
         </View>
       );
     }}/>
 );
}
}

const styles = {};