kangaroo/js/page/MainPage.js

import React from "react"
import { StyleSheet, Text, View, ImageBackground } from "react-native"
import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
export default class MainPage extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <ImageBackground source={require('../../static/homeMatch.png')}
                    style={styles.topBgc}
                >
                    <Text style={styles.bgcText}>你会不会催好朋友还钱？</Text>
                </ImageBackground>
                <View style={styles.itemArea}>
                    <Text style={styles.itemText}>A 不催，催账可能产生不必要的隔阂</Text>
                </View>
                <View style={styles.itemArea}>
                    <Text style={styles.itemText}>B 催，珍惜彼此的信用</Text>
                </View>

            </View>

        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: getStatusBarHeight() + unitHeight * 30,
        paddingLeft: unitWidth * 60,
        paddingRight: unitWidth * 60,
        alignItems: "center",
        position: "relative"
    },
    topBgc: {
        width: unitWidth * 702,
        height: unitHeight * 160,
        justifyContent: "center",
        alignItems: "center",
        paddingTop: unitHeight * 20,
        marginBottom: unitHeight * 40
    },
    bgcText: {
        fontSize: unitWidth * 36,
        color: "#fff"
    },
    itemArea: {
        width: unitWidth * 702,
        height: unitHeight * 108,
        borderColor: "#ccc",
        borderWidth: 1,
        borderRadius: unitHeight * 10,
        marginBottom: unitHeight * 40,
        justifyContent: "center",
        paddingLeft: unitWidth * 40
    },
    itemText: {
        fontSize: unitWidth * 28,
        color: "#333333"
    }
})