Update Home Buttons

README.md

@@ -16,6 +16,11 @@ Commit: [Add Tab](https://github.com/yuanguozheng/JdApp/commit/b661cd8767749bcf8
 ### 教程三: 
 [React Native布局实践：开发京东客户端首页（三）轮播图的实现](http://blog.csdn.net/yuanguozhengjust/article/details/50556700)
 
+Commit: [Add ViewPager](https://github.com/yuanguozheng/JdApp/commit/2d1741bef1c7908c9e0d2f52c23210e8de2fcc7a)
+
+### 教程四: 
+[React Native布局实践：开发京东客户端首页（四）——首页功能按钮及控件封装](http://blog.csdn.net/yuanguozhengjust/article/details/50601111)
+
 Commit: [Add ViewPager](https://github.com/yuanguozheng/JdApp/commit/2d1741bef1c7908c9e0d2f52c23210e8de2fcc7a) 
 
 ### 其他教程

home/HomePage.js

@@ -9,9 +9,11 @@ import React, {
     Image,
     StyleSheet,
     ScrollView,
+    Alert,
     RefreshControl
 } from 'react-native';
 import ViewPager from 'react-native-viewpager';
+import MenuButton from './MenuButton';
 
 const BANNER_IMGS = [
     require('../images/banner/1.jpg'),
@@ -42,6 +44,10 @@ export default class HomePage extends Component {
         );
     }
 
+    _onMenuClick(title, tag) {
+        Alert.alert('提示', '你点击了:' + title + " Tag:" + tag);
+    }
+
     render() {
         return (
             <View>
@@ -51,6 +57,35 @@ export default class HomePage extends Component {
                     renderPage={this._renderPage}
                     isLoop={true}
                     autoPlay={true}/>
+                <View style={styles.menuView}>
+                    <MenuButton renderIcon={require('../images/home_icons/wdgz.png')}
+                                showText={'我的关注'} tag={'wdgz'}
+                                onClick={this._onMenuClick}/>
+                    <MenuButton renderIcon={require('../images/home_icons/wlcx.png')}
+                                showText={'物流查询'} tag={'wlcx'}
+                                onClick={this._onMenuClick}/>
+                    <MenuButton renderIcon={require('../images/home_icons/cz.png')}
+                                showText={'充值'} tag={'cz'}
+                                onClick={this._onMenuClick}/>
+                    <MenuButton renderIcon={require('../images/home_icons/dyp.png')}
+                                showText={'电影票'} tag={'dyp'}
+                                onClick={this._onMenuClick}/>
+                </View>
+                <View style={styles.menuView}>
+                    <MenuButton renderIcon={require('../images/home_icons/yxcz.png')}
+                                showText={'游戏充值'} tag={'yxcz'}
+                                onClick={this._onMenuClick}/>
+                    <MenuButton renderIcon={require('../images/home_icons/xjk.png')}
+                                showText={'小金库'} tag={'xjk'}
+                                onClick={this._onMenuClick}/>
+                    <MenuButton renderIcon={require('../images/home_icons/ljd.png')}
+                                showText={'领京豆'} tag={'ljd'}
+                                onClick={this._onMenuClick}/>
+                    <MenuButton renderIcon={require('../images/home_icons/gd.png')}
+                                showText={'更多'} tag={'gd'}
+                                onClick={this._onMenuClick}/>
+                </View>
+                <View style={{marginTop:15,borderWidth:0.5,borderColor:'#ccc'}}/>
             </View>
         )
     }
@@ -62,4 +97,9 @@ const styles = StyleSheet.create({
         height: 130,
         resizeMode: 'stretch'
     },
+    menuView: {
+        flexDirection: 'row',
+        marginTop: 10
+    }
+
 });

home/MenuButton.js

@@ -0,0 +1,57 @@
+/**
+ * Created by yuanguozheng on 16/1/22.
+ */
+'use strict';
+
+import React, {
+    Component,
+    View,
+    Text,
+    Image,
+    TouchableWithoutFeedback,
+    PropTypes,
+    StyleSheet
+} from 'react-native';
+
+export default class MenuButton extends React.Component {
+
+    static propTypes = {
+        renderIcon: PropTypes.number.isRequired,  // 图片,加入.isRequired即为比填项
+        showText: PropTypes.string,  // 显示标题\文字
+        tag: PropTypes.string,  // Tag
+        onClick: PropTypes.func  // 回调函数
+    };
+
+    constructor(props) {
+        super(props);
+        this._onClick = this._onClick.bind(this);  // 需要在回调函数中使用this,必须使用bind(this)来绑定
+    }
+
+    _onClick() {
+        if (this.props.onClick) {   // 在设置了回调函数的情况下
+            this.props.onClick(this.props.showText, this.props.tag);  // 回调Title和Tag
+        }
+    }
+
+    render() {
+        return (
+            <TouchableWithoutFeedback onPress={this._onClick}>
+                <View style={{alignItems:'center',flex:1}}>
+                    <Image style={styles.iconImg} source={this.props.renderIcon}/>
+                    <Text style={styles.showText}>{this.props.showText}</Text>
+                </View>
+            </TouchableWithoutFeedback>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    iconImg: {
+        width: 38,
+        height: 38,
+        marginBottom: 2
+    },
+    showText: {
+        fontSize: 12
+    }
+});

index.android.js

@@ -15,7 +15,4 @@ class JdApp extends Component {
     }
 }
 
-AppRegistry.registerComponent('JdApp', () => JdApp);
-
-
-AppRegistry.registerComponent('JdApp', () => JdApp);
+AppRegistry.registerComponent('JdApp', () => JdApp);