`

[React Native]map遍历以及获取图片尺寸

阅读更多

1.array里面装了图片

state = {
        array: [image_1, image_2, image_3, image_4, image_5,image_kc1,image_kc2,image_kc3,image_kc4,image_kc5],
      }

 2.遍历这些图片:

renderChildren() {
        return this.state.array.map((i, key) => {
              return (
                <View style={this.getChildrenStyle(i)} key={key}>
                <Text>{key}</Text>
                  <Image source={i}/>
                </View>
              ); 
            }, this);
      }

上面使用了map遍历,key是index,i是value. key={key}不可或缺,否则报错.

 

获取图片尺寸:

import resolveAssetSource from 'resolveAssetSource';

getChildrenStyle(i) {
        return {
          width: resolveAssetSource(i).width,
          height: resolveAssetSource(i).height,
        };
      }

通过上面的遍历,传入的i,可以获得item,然后获取高度和宽度 

分享到:
评论

相关推荐

    react-native-quick-maps:React Native Quick Map渲染本地地图(iOS

    React Native Quick Maps是一款用于在React Native应用中快速集成本地地图功能的库,它为iOS平台提供了Apple Maps的支持,而对Android平台则支持Google Maps。这个库使得开发者无需深入学习原生地图API,就能轻松...

    ReactNative的响应式网格视图

    React Native的响应式网格视图是开发混合移动应用的一个关键特性,它允许开发者构建动态、适应不同屏幕尺寸的用户界面。在JavaScript开发中,尤其是在React Native框架内,响应式网格视图提供了类似网页布局中的...

    reactnative水平竖直滚动跑马灯

    总体来说,这个项目涵盖了React Native的基础知识,包括组件化、状态管理、事件处理、样式定制以及动画效果的实现。它展示了如何利用JavaScript和React Native的特性来创建一个交互式的、具有动态效果的移动应用功能...

    React Native 通告消息竖向轮播组件的封装

    `map`函数被用来遍历`kb_content`数组并创建每个消息项。 5. **动画控制**:组件可能有一个`startAnimation`方法,该方法使用`Animated.timing`来设置动画的启动、延迟、持续时间和缓动函数。`Animated.timing`会...

    caesar_code:只是尝试React Native

    在React Native中实现这样的功能,我们需要掌握JavaScript的基础语法以及React Native的组件化编程思想。 React Native是Facebook推出的开源框架,它允许开发者使用JavaScript和React编写原生移动应用。React ...

    yelp-react-native-hooks:使用Yelps API的简单应用,以探索ReactReact Native的钩子和新功能

    【yelp-react-native-hooks】项目是一个专为学习和探索React Native和React Hooks设计的应用实例,它利用Yelp的API来获取并展示餐厅信息。在这个项目中,开发者可以深入理解如何在React Native环境中有效地使用Hooks...

    react-gdmap:使用react和高德地图实现自定义点标记,筛选

    在本文中,我们将深入探讨如何使用React库与高德地图API来实现自定义点标记以及地图上的点筛选功能。React是Facebook开发的一款用于构建用户界面的JavaScript库,它以其组件化开发模式和高效的虚拟DOM更新而闻名。而...

    【React框架】教程&案例&相关项目

    - **列表渲染**:使用数组的map方法遍历数组元素。 - **列表和键**: - **键(Key)**:当渲染列表时,为列表项分配一个唯一的键,提高列表更新的性能。 - **React Router**: - **实现页面路由**:React ...

    RN ScrollView 实现轮播图效果

    2. 使用`map`函数遍历数据源,根据`currentIndex`渲染对应的轮播项。 3. 实现滑动指示器,可以是简单的底部线条或者小圆点,通过改变颜色或位置来反映当前轮播项。 4. 添加自动轮播逻辑,确保在每次滑动结束后能正确...

    有赞(24问).pdf

    适配工作通常包括设置不同平台的样式差异,使用平台特定的API或组件,以及确保在不同屏幕尺寸和分辨率上都能提供良好的用户体验。可以通过条件语句来区分平台,并根据需要引入特定的样式文件或组件。 RN为什么能在...

    JavaScript 宝典(第四版)

    此外,随着移动设备的普及,学习如何使用React Native或Electron进行跨平台开发也是现代开发者的重要技能。 九、测试与部署 编写自动化测试是保证代码质量的关键步骤,JavaScript有Mocha、Jest等测试框架。部署方面...

    javascript 教程,较详细的讲述了javascript的基础知识

    随着时间的发展,JavaScript已经超出了浏览器的范畴,现在可以用于服务器端开发(如Node.js)、移动应用开发(React Native)以及各种物联网设备。 二、变量与数据类型 JavaScript是动态类型的,这意味着变量的数据...

    前端十年经验 - JavaScript基础知识大纲-思维构图.pdf

    - 移动端框架:Ionic、React Native、Weex用于移动端开发。 - 数据可视化框架:ECharts、D3.js、Highcharts等用于图表绘制。 13. JavaScript的发展和未来: - JavaScript的历史:了解其起源和演进过程。 - ...

    Course_work-2

    JavaScript广泛应用于网页动态效果、用户交互、后端开发(Node.js)、移动应用开发(React Native或Ionic)以及游戏开发等。在这个项目中,我们可能会看到JavaScript的基本语法、函数、对象、数组、数据类型、控制...

    js_roma

    3. **对象与数组**:对象的创建、属性访问、方法调用,数组的遍历、操作(push、pop、shift、unshift、splice等)及高级特性如map、filter、reduce等。 4. **原型与继承**:理解原型链、__proto__、prototype,以及...

    FE21-JS-DAY05-Vendula-Martin

    JavaScript不仅适用于客户端的浏览器环境,还可以在服务器端(如Node.js)和移动应用开发(React Native、Ionic等)中使用。 【文件名称列表】"FE21-JS-DAY05-Vendula-Martin-master" 指向的是这个项目的主目录,...

    zadania z kursu

    此外,JavaScript也可以用于服务器端开发(如Node.js),以及移动应用开发(如React Native)等。 【压缩包子文件的文件名称列表】: "zadaniaKurs-master" 这个文件名可能是课程作业的主目录,"master"常常被用作...

    arrieandgeraldr

    其主要应用领域包括前端开发(浏览器中的交互)、后端开发(Node.js)、服务器端渲染、桌面应用(Electron)以及移动应用开发(React Native)等。 JavaScript的核心知识点包括: 1. **基础语法**:变量、数据类型...

    Infuzex

    11. **跨平台开发**:通过React Native、Ionic等工具,JavaScript可以用于开发原生移动应用,实现多平台兼容。 12. **WebAssembly**:WebAssembly允许其他编译语言(如C++、Rust)的代码在Web上运行,与JavaScript...

    js-challage-bootcamp

    8. **DOM遍历与操作**:掌握Traversing API,如parentElement, childNodes, nextSibling等,以及如何创建和修改DOM树。 9. **错误处理**:学会try/catch语句来处理可能出现的运行时错误。 10. **性能优化**:了解...

Global site tag (gtag.js) - Google Analytics