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'
    }
});