React Native元件佈局應用示例小結

序：

     學完了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、圖片位置：

解答：圖片我都放在Asset裡面了，當然你也可以網路載入，或者放在RN專案中。

3、迴圈新增檢視，JSX語法有說可以看下。JSX語法

資原始檔：https://pan.baidu.com/s/1i5l95xb