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

来源：互联网发布：淘宝详情页背景素材编辑：程序博客网时间：2024/04/29 01:10
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'    }});
0 0