react-native 记录--Scrollview之width引起的不显示

今天学习react-native ,尝试使用scroll view来写一个banner遇到了一个问题

<ScrollView horizontal={true}
                           removeClippedSubviews={true}
                           showsHorizontalScrollIndicator={false}
                           automaticallyAdjustContentInsets={false}
                           pagingEnabled={true}
                           style={[styles.scrollview,styles.horizontalScrollView]}>
        {this.state.bannerIcon.map((uri,i)=>{return this.scrollViewItem(uri,i)})}
</ScrollView>
 scrollViewItem(uri,i){
        return <Image key = {i} style={{resizeMode:'cover',height:200,width:this.state.width,backgroundColor:'red'}} source={{uri:uri}}/>;
    }

width:this.state.width 这个地方需要注意,虽然这个width能够 <strong>.</strong> 出来但是这个并不是你想要的 ,所以不管怎么样都没有效果。我尝试着将Scroll view的 horizontal 属性拿掉可以显示出图片,这里就给了我误导,所以一直没有想到是this.state.width引起的

const {width, height} = Dimensions.get('window');
  scrollViewItem(uri,i){
        return <Image key = {i} style={{resizeMode:'cover',height:200,width:width,backgroundColor:'red'}} source={{uri:uri}}/>;
    }

这样就不会出现那样的问题了!解决了这个问题。

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容