搭建直播带货平台在样式、宽高、布局等设计相关

搭建直播带货平台在样式、宽高、布局等设计相关代码
样式
使用了驼峰命名法，例如将background-color改为backgroundColor
后声明的属性会覆盖先声明的同名属性

 

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

const LotsOfStyles = () => {
return (
<View style={styles.container}>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
marginTop: 50,
},
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});

export default LotsOfStyles;

 

宽高
固定宽高

<View style={{width: 100, height: 100, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 16, margin: 20}}></Text>
</View>

 

在 Android 里，解释为 100 dp，dp 是安卓里的单位，字体被解释为 16 sp。
在 IOS 里，尺寸单位解释为 pt

弹性（Flex）布局
RN 中的 flexbox 和 web css 的 flexbox 不同之处？

flexDirection：RN中默认 flexDirection: colum，web css 中默认 flex-direction: row
alignItems：RN中默认 alignItems: stretch，web css 中默认 align-items: flex-start
flex：RN中只接受一个参数，web css 中接受多个 flex: 2 2 10%
不支持的属性：align-content，flex-basis，order，flex-basis，flex-grow，flex-shrink

 

图片

// 正确
<Image source={require('./my-icon.png')} />;

// 错误
const icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// 正确
const icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;

// 网络图片，需要手动指定图片的尺寸
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{width: 400, height: 400}} />

// 背景图片
return (
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
);

 

以上就是 搭建直播带货平台在样式、宽高、布局等设计相关代码，更多内容欢迎关注之后的文章