React Native组件布局应用示例小结

星宇大前端

发布于 2019-01-15 15:33:00

59500

代码可运行

文章被收录于专栏：大宇笔记大宇笔记

运行总次数：0

代码可运行

序：

学完了Flex布局和Text Image组件，感觉可以总结一下了。因为本人对英雄联盟比较感兴趣，所以准备把前面学习的做一个应用小例子。

都是前面文章提到内容，主要练习下熟练度，就不写备注了。

先看下效果:

代码如下：

import React, { Component } from 'react';
import {
   AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

var heroData = require('./ImageData.json');

class RNHybrid extends Component {

  render() {  
      return(  
        <View style={styles.container}>  
            {this.renderLoadForView()}  
        </View>  
      );  
   }

   renderLoadForView(){  
    var forView = [];
    var heroArray = heroData.data
    for (var i = 0; i < heroArray.length; i++) {  
    	var hero =  heroArray[i];
        forView.push(
        <View key={i} style={styles.containViewStyle}>
        <Image source={{uri: hero.img}}  style={styles.imageStyle}/>  
        <Text key={i}>
           {hero.title}
        </Text>
        </View>
      );  
    }  
    return forView;  
  }  
}


const styles = StyleSheet.create({
   container:{
   		marginTop:100,
   		flexDirection:'row',
      flexWrap:'wrap',
      justifyContent:'space-around',
   },
   containViewStyle:{
      alignItems:'center',
      justifyContent:'center',
      width:120,
      height:120,
      borderColor:'black',
      borderWidth:1,
      marginBottom:10,
   },
   imageStyle:{
      width:60,
      height:60,
   },
});

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

前面博客没有提到的知识点说明：

1、var heroData = require('./ImageData.json');

看下Json文件：

{
  "data": [
    {
      "img" : "hero1",
      "title" : "木木"
    },
    {
      "img" : "hero2",
      "title" : "剑姬"
    },
    {
      "img" : "hero3",
      "title" : "船长"
    },
    {
      "img" : "hero4",
      "title" : "日女"
    },
    {
      "img" : "hero5",
      "title" : "锤石"
    },
    {
      "img" : "hero6",
      "title" : "老鼠"
    }
  ]
}

解答：这句话的意思是拿到json这个对象，就相当于OC中拿到一个解析好的Json文件。剩下的大家都知道了。

2、图片位置：