ReactNative学习十五－横竖布局及右上角圆点

1.效果图

2.源代码

'use strict';

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

var deviceWidth = Dimensions.get('window').width;

export default class MyView extends React.Component {
    render()
     {
        return (
            <View style={styles.container}>
                 <View style={ styles.person }>
                   <Image  source={require('./images/banner/2.jpg')} style={styles.imageOutside}>
                       <Image source={require('./point.png')} style={styles.imageInside}/>
                   </Image> 
                 </View>

                <View style={ styles.person }>

                    <Image style={ styles.personImage } source={require('./images/banner/2.jpg') } />
       
                    <View style={ styles.personInfo }>

                       <Text style={ styles.personName }>
                               firstName
                       </Text>

                       <View style={ styles.personScore }>
                          <Text style={ styles.personScoreHeader }>
                                WON
                          </Text>
                          <Text style={ [styles.personScoreValue, styles.won] }>
                               won
                          </Text>
                       </View>

                       <View style={ styles.personScore }>
                          <Text style={ styles.personScoreHeader }>
                             LOST
                          </Text>
            
                          <Text style={ [styles.personScoreValue, styles.lost] }>
                             lost
                          </Text>
                       </View>

                       <View style={ styles.personScore }>
                          <Text style={ styles.personScoreHeader }>
                              SCORE
                          </Text>
                          <Text style={ styles.personScoreValue }>
                           score
                          </Text>
                      </View>

                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop:5,
        paddingLeft:5,
        paddingRight:5,
        paddingBottom:5,
    },
    imageOutside:{//类似android相对布局外图
        alignSelf:'center',//自身中间对齐
        justifyContent:'flex-start',//主轴左对齐
        resizeMode: 'stretch',
        height:150,
        width:330
    },
    imageInside:{//类似android相对布局右上角小圆点
        alignSelf:'flex-end',//自身右对齐
    },
    person: {
      margin: 10,
      borderRadius: 3,
      overflow: 'hidden'
    },
    personInfo: {
      borderLeftColor: 'rgba( 0, 0, 0, 0.1 )',
      borderLeftWidth: 1,
      borderRightColor: 'rgba( 0, 0, 0, 0.1 )',
      borderRightWidth: 1,
      borderBottomColor: 'rgba( 0, 0, 0, 0.1 )',
      borderBottomWidth: 1,
      padding: 10,
      alignItems: 'center',
      flexDirection: 'row'
    },
    personImage: {
        width: deviceWidth,//设备宽(只是一种实现，此处多余)       
        height: 150,
        resizeMode: 'stretch'
    },
    personName: {
      fontSize: 18,
      flex: 1,
      fontWeight :'bold',
      paddingLeft: 5
    },
    personScore: {
      flex: 0.25,
      alignItems: 'center'
    },
    personScoreHeader: {
      color: 'rgba( 0, 0, 0, 0.3 )',
      fontSize: 10,
      fontWeight: 'bold'
    },
    personScoreValue: {
      color: 'rgba( 0, 0, 0, 0.6 )',
      fontSize: 16
    },
    won: {
      color: '#93C26D'
    },
    lost: {
      color: '#DD4B39'
    }
});