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.1 )',borderLeftWidth: 1,borderRightColor: 'rgba( 0,borderRightWidth: 1,borderBottomColor: 'rgba( 0,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.3 )',fontSize: 10,fontWeight: 'bold'
    },personscoreValue: {
      color: 'rgba( 0,0.6 )',fontSize: 16
    },won: {
      color: '#93C26D'
    },lost: {
      color: '#DD4B39'
    }
});