我正在做评论部分,所以如果图像为空,我想隐藏图像区域 如果图像源可用,则显示图像内容 和使用条件,如果但仍加载相同的问题图像,但空间区域是如何解决的问题,请让我知道我是本机新手
并使用了许多参考,但仍然是同一问题
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>
);
}}/>
);
}
}
答案 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 = {};