react-native九宫格布局封装

你的名字 2022-03-14 20:34 384阅读 0赞

Android提供了网格空间GridView，而ios需要开发者自己实现，不推荐使用ListView，将来的版本中将删除它，会有警告

  • 准备图片（图片命名，必须与下方代码内数据的icon名相同）

20190301160317645.png

  • 效果图及代码

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70

  1. import React, { Component } from 'react';
  2. import { StyleSheet, Text, View, Image, Dimensions } from 'react-native';
  3. //定义一些全局的变量
  4. //加载json文件数据
  5. const BadgeData = {
  6.   data: [
  7.     {
  8.       icon: "icon1",
  9.       title: "Alisa分享"
  10.     },
  11.     {
  12.       icon: "icon2",
  13.       "title": "开心网分享"
  14.     },
  15.     {
  16.       icon: "icon3",
  17.       title: "QQ分享"
  18.     },
  19.     {
  20.       icon: "icon4",
  21.       title: "QQ空间分享"
  22.     },
  23.     {
  24.       icon: "icon5",
  25.       title: "QQ微博分享"
  26.     },
  27.     {
  28.       icon: "icon6",
  29.       title: "人人网分享"
  30.     },
  31.     {
  32.       icon: "icon7",
  33.       title: "微信分享"
  34.     },
  35.     {
  36.       icon: "icon8",
  37.       title: "微博分享"
  38.     },
  39.     {
  40.       icon: "icon9",
  41.       title: "朋友圈分享"
  42.     },
  43.     {
  44.       icon: "icon10",
  45.       title: "短信分享"
  46.     }
  47.   ]
  48. }
  49. //屏幕的宽度
  50. const width = Dimensions.get('window').width;
  51. const height = Dimensions.get('window').height;
  52. //定义一些全局的变量
  53. const cols = 3;
  54. const boxW = 100;
  55. const vMargin = (width - cols * boxW) / (cols + 1);
  56. const hMargin = 25;
  57. //设置样式
  58. const styles = StyleSheet.create({
  59.   container: {
  60.     //    确定主轴的方向
  61.     flexDirection: 'row',
  62.     //    一行显示不完的话换行显示
  63.     flexWrap: 'wrap',
  64.     //    换行以后,
  65.     backgroundColor: '#F5FCFF',
  66.     height:'100%'
  68.   },
  69.   outViewStyle: {
  70.     //    设置侧轴的对齐方式
  71.     alignItems: 'center',
  72.     width: boxW,
  73.     height: boxW,
  74.     marginLeft: vMargin,
  75.     marginTop: hMargin
  76.   },
  77.   iconStyle: {
  78.     width: 80,
  79.     height: 80,
  80.     marginBottom: 5
  81.   },
  82.   mainTitleStyle: {
  84.   }
  85. });
  86. class Tabnavigation2 extends Component {
  87.   static navigationOptions = {
  88.     headerTitle: "发现"
  89.   };
  90.   render() {
  91.     return (
  92.       <View style={styles.container}>
  93.         {/*返回6个包*/}
  94.         {this.renderAllBadge()}
  95.       </View>
  96.     );
  97.   }
  98.   // 返回所有的包
  99.   renderAllBadge() {
  100.     // 定义数组装所有的子组件
  101.     let allBadge = [];
  102.     // 遍历json数据
  103.     for (var i = 0; i < BadgeData.data.length; i++) {
  104.       // 取出每一个数据对象
  105.       var badge = BadgeData.data[i];
  106.       // 装入数据
  107.       allBadge.push(
  108.         <View key={i} style={styles.outViewStyle}>
  109.           <Image
  110.             style={styles.iconStyle}
  111.             source={
  112.    { uri: badge.icon }}
  113.           ></Image>
  114.           <Text style={styles.mainTitleStyle}>
  115.             {badge.title}
  116.           </Text>
  117.         </View>
  118.       );
  119.     }
  120.     // 返回数组
  121.     return allBadge;
  122.   }
  123. }
  124. export default Tabnavigation2

为了方便，我最后给icon定义了具体路径

  1. const BadgeData = {
  2.   data: [
  3.     {
  4.       icon: "http://i.imgur.com/UePbdph.jpg",
  5.       title: "Alisa分享"
  6.     }
  7. }

发表评论

表情：
评论列表 （有 0 条评论，384人围观）

还没有评论，来说两句吧...

相关阅读

    相关 九宫格

    将数字 1 …9 填入一个 3×3 的九宫格中， 使得格子中每一横行和的值全部相等，每一竖列和的值全部相等。 请你计算有多少种填数字的方案。 分析: 可用dfs(

    谁践踏了优雅谁践踏了优雅/ 0 赞/ 330 阅读