react native 自定义九宫格组件

需求：利用 <View/>、<Text/>、<Image/> 制作九宫格

1.建立 LKImageDemo.js

 1 import React,{ Component} from 'react';
 2 import{
 3     View,
 4     Image,
 5     StyleSheet,
 6     Text,
 7     Dimensions
 8 } from 'react-native';
 9 
10 
11 export default class LKImageDemo extends Component{
12     constructor(){
13         super();
14     }
15 
16     render(){
17         return(
18             <View style={styles.container}>
19                 {this._renderItem()}
20             </View>
21         )
22     }
23 
24 
25     _renderItem(){
26         //0.常量
27         let screenW=Dimensions.get('window').width;//获取屏幕的宽度
28         let cols=3,boxW=100,boxH=120;//三列，每个格子宽度100，高度120
29         let hMargin=(screenW-boxW*cols)/(cols+1);//每个盒子水平之间距离
30         let vMargin=20;//盒子之间垂直间距离
31         let dataArr=[
32             {
33                 "icon":"https://hrbrzyk.com/img/banner1.jpg",
34                 "name":"单肩包"
35             },
36             {
37                 "icon":"https://hrbrzyk.com/img/banner1.jpg",
38                 "name":"斜挎包"
39             },
40             {
41                 "icon":"https://hrbrzyk.com/img/banner1.jpg",
42                 "name":"个性包"
43             },
44             {
45                 "icon":"https://hrbrzyk.com/img/banner1.jpg",
46                 "name":"旅游包"
47             },
48             {
49                 "icon":"https://hrbrzyk.com/img/banner1.jpg",
50                 "name":"钱包"
51             },
52             {
53                 "icon":"https://hrbrzyk.com/img/banner1.jpg",
54                 "name":"麻布包"
55             }
56         ]
57 
58         //1.组件数组
59         let itemArr=[];
60 
61         //2.遍历数组
62         for(let i=0;i<dataArr.length;i++){
63             //2.1 取出单个数据
64             let data=dataArr[i];
65             //2.2 创建组件妆容数组
66             itemArr.push(
67                 <View key={i} style={{
68                     width:boxW,
69                     height:boxH,
70                     backgroundColor:'red',
71                     justifyContent:'center',
72                     alignItems:'center',
73                     marginLeft:hMargin,
74                     marginTop:vMargin
75                 }}>
76                     <Image
77                     source={{uri:data.icon}}
78                     style={{width:80,height:80}}
79                     />
80                     <Text style={{marginTop:5}}>{data.name}</Text>
81                 </View>
82             )
83         }
84         //3.返回组件数组
85         return itemArr;
86     }
87 }
88 
89 
90 const styles=StyleSheet.create({
91     container:{
92         flex:1,
93         flexDirection:'row',
94         flexWrap:'wrap'
95     }
96 });

2.App.js 引用九宫格组件

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  *
 5  * @format
 6  * @flow strict-local
 7  */
 8 
 9 import React from 'react';
10 import {
11   SafeAreaView,
12   StyleSheet,
13   ScrollView,
14   View,
15   Text,
16   StatusBar,
17 } from 'react-native';
18 
19 import {
20   Header,
21   LearnMoreLinks,
22   Colors,
23   DebugInstructions,
24   ReloadInstructions,
25 } from 'react-native/Libraries/NewAppScreen';
26 
27 import LKImageDemo from './components/LKImageDemo';
28 
29 
30 const App: () => React$Node = () => {
31 
32   return (
33     <>
34       <StatusBar barStyle="dark-content" />
35       <SafeAreaView style={styles.mainViewStyle}>
36 
37       <LKImageDemo/>
38       </SafeAreaView>
39     </>
40   );
41 };
42 
43 
44 const styles=StyleSheet.create({
45   mainViewStyle:{
46       flex:1,
47       backgroundColor:'cyan',
48   }
49 });
50 
51 
52 
53 export default App;

3.结果如图：

 

posted @ 2021-01-09 16:45  创客未来  阅读(317)  评论(0)  编辑  收藏  举报