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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!