[英]react-native-swiper does not show dynamic images
I have issue that my swiper does not show images. 我的问题是我的刷卡器不显示图像。 Swiper and dots from swiper are there but images are not showing. 有刷卡器和刷卡器中的点,但未显示图像。 I am pretty new to react-native. 我对本机很陌生。 This is my code: 这是我的代码:
import React from 'react';
import {
StyleSheet,
View,
Image,
Text
} from 'react-native';
import Swiper from 'react-native-swiper';
export default class HomeScreen extends React.Component {
state = {
data: []
}
componentDidMount = () => {
this.setState({
data: this.props.navigation.getParam('data', 'NO-DATA')
});
}
render() {
return (
<View style={styles.container}>
<Swiper
style = {styles.swiper }
>
{
this.state.data.map( (item, i) => {
<View>
<Text> {item.url} </Text>
<Image
style={{width: 200, height: 200}}
source={{uri: item.url}}
/>
</View>
})
}
</Swiper>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
},
swiper: {
width: 200,
height: 200
}
});
The issue is not only with image, also it is happening with text, etc. Am i missing something ? 问题不仅在于图像,还包括文本等。我是否缺少某些东西?
Return is missing inside the map add it. 返回缺少在地图内添加它。
{
this.state.data.map && this.state.data.map( (item, i) => {
return(
<View>
<Text> {item.url} </Text>
<Image
style={{width: 200, height: 200}}
source={{uri: item.url}}
/>
</View>)
})
}
Or without return. 还是没有回报。 If you use ( this bracket you no need to add return 如果使用(此括号,则无需添加返回
{
this.state.data.map && this.state.data.map( (item, i) => (
<View>
<Text> {item.url} </Text>
<Image
style={{width: 200, height: 200}}
source={{uri: item.url}}
/>
</View>)
))
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.