React Native實現二維碼管理界面

今天講下實現二維碼管理界面，其實這個題目不是很合適，重點講如何實現類似的界面。
界面中顯示有限個模塊。每個模塊上、中、下結構；每個模塊有一個背景，背景有陰影效果。

代碼:

/**
 * Created by wangwentao on 2016/12/30.
 * 說明:二維碼管理界面
 */
import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    Clipboard,
    NativeModules,
    InteractionManager,
    ScrollView,
    Dimensions
} from 'react-native';

import StyleSheet from 'StyleSheet';
var screenWidth = Dimensions.get('window').width;
export default class CodeManage extends Component {

    // 構造
    constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
            ziZhuCodeNum:6,
            dingECodeNum:4,
            orderCodeNum:1,
            rechargeCodeNum:1,
        };
    }

    getContentRender(){
        let _this = this;
        let ziZhuNum = this.state.ziZhuCodeNum + "張";
        let dingECodeNum = this.state.dingECodeNum + "張";
        let orderCodeNum = this.state.orderCodeNum + "張";
        let rechargeCodeNum = this.state.rechargeCodeNum + "張";
        return (
            <ScrollView style={styles.flex_style}>
                <View style = {styles.content_style}>
                    {/*顯示前兩個模塊*/}
                    <View style = {[styles.marginTop50,styles.row_style]}>
                        {/*顯示第一個模塊*/}
                        <TouchableOpacity activeOpacity={0.8}
                                          onPress={_this._ziZhuClick.bind(_this)}>
                                <Image style = {[styles.box_size,styles.marginLeft30,styles.marginRight25]}
                                       source={asset(require("../../asset/codemanage_background.png"))}
                                       resizeMode="stretch">
                                       <Image style = {[styles.image_size_style]}
                                              source={asset(require("../../asset/zizhucode.png"))}
                                              resizeMode="stretch">
                                       </Image>
                                        <Text style = {[styles.text_top_styles,styles.marginTop5]}>自助付款二維碼</Text>
                                        <Text style = {styles.text_bottom_styles}>{ziZhuNum}</Text>

                                </Image>
                            </TouchableOpacity>

                        {/*顯示第二個模塊*/}
                        <TouchableOpacity activeOpacity={0.8}
                                          onPress={_this._dingEClick.bind(_this)}>
                            <Image style = {styles.box_size}
                                   source={asset(require("../../asset/codemanage_background.png"))}
                                   resizeMode="stretch">
                                <Image style = {[styles.image_size_style]}
                                       source={asset(require("../../asset/dingecode.png"))}
                                       resizeMode="stretch">
                                </Image>

                                <Text style = {[styles.text_top_styles,styles.marginTop5]}>定額二維碼</Text>
                                <Text style = {styles.text_bottom_styles}>{dingECodeNum}</Text>

                            </Image>
                        </TouchableOpacity>
                    </View>

                    {/*顯示後面兩個模塊*/}
                    <View style = {[styles.marginTop25,styles.marginBottom48,styles.row_style]}>
                        {/*顯示後面第一個模塊*/}
                        <TouchableOpacity activeOpacity={0.8}
                                          onPress={_this._orderClick.bind(_this)}>
                            <Image style = {[styles.box_size,styles.marginLeft30,styles.marginRight25]}
                                   source={asset(require("../../asset/codemanage_background.png"))}
                                   resizeMode="stretch">
                                <Image style = {[styles.image_size_style]}
                                       source={asset(require("../../asset/ordercode.png"))}
                                       resizeMode="stretch">
                                </Image>
                                <Text style = {[styles.text_top_styles,styles.marginTop5]}>下單二維碼</Text>
                                <Text style = {styles.text_bottom_styles}>{orderCodeNum}</Text>
                            </Image>
                        </TouchableOpacity>

                        {/*顯示後面第二個模塊*/}
                        <TouchableOpacity activeOpacity={0.8}
                                          onPress={_this._rechargeClick.bind(_this)}>
                            <Image style = {styles.box_size}
                                   source={asset(require("../../asset/codemanage_background.png"))}
                                   resizeMode="stretch">
                                <Image style = {[styles.vip_image_size]}
                                       source={asset(require("../../asset/huiyuancode.png"))}
                                       resizeMode="stretch">
                                </Image>
                                    <Text style = {[styles.text_top_styles,styles.marginTop5]}>會員充值二維碼</Text>
                                    <Text style = {styles.text_bottom_styles}>{rechargeCodeNum}</Text>

                            </Image>
                        </TouchableOpacity>
                    </View>
                </View>
            </ScrollView>
        );
    }

    render() {
        let _this= this;
        return (
            <View style={styles.flex_style}>
                <View style={baseStyles.windowBackground}>           
                    {_this.getContentRender()}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex_style:{
        flex:1,
    },
    content_style:{
        flexDirection:"column",
        backgroundColor:"#ffffff",
    },
    row_style:{
        flexDirection:"row",
    },
    marginTop50:{
        marginTop:50,
    },
    marginTop25:{
        marginTop:25,
    },
    marginBottom48:{
        marginBottom:48,
    },
    box_size:{
        flexDirection:"column",
        alignItems:"center",
        justifyContent:"center",
        width:(screenWidth-60-25)/2,
        height:(screenWidth-60-25)*254/(2*298),
    },
    marginLeft30:{
        marginLeft:30,
    },
    marginRight25:{
        marginRight:25,
    },
    column_style:{
        flexDirection:"column",
    },
    image_size_style:{
        width:70*(screenWidth-60-25)/(2*298),
        height:93*(screenWidth-60-25)/(2*298),
    },
    marginTop15:{
        marginTop:15,
    },
    marginTop5:{
        marginTop:5,
    },
    text_top_styles:{
       fontSize:14,
        color:"#333333"
    },
    text_bottom_styles:{
        fontSize:12,
        color:"#999999"
    },
    vip_image_size:{
        width:93*(screenWidth-60-25)/(2*298),
        height:70*(screenWidth-60-25)/(2*298),
    },
});

分析:
1)背景採用的是一張圖，這張圖有些要求，最好是大分辨率，如果是小分辨率的圖在不同的手機屏幕上會出現陰影太寬
2)在不同的手機分辨率上，確保每個模塊的間距是固定的，但是每個模塊的大小是變的，具體可以看樣式中的計算大小部分
3)分兩行顯示，每行顯示2個模塊，每個模塊按列模式顯示上、中、下三部分

這裏給了代碼中的佈局相關核心代碼，和項目業務相關的部分已去掉，這裏重點講思路和界面的佈局。