搭建直播带货平台在样式、宽高、布局等设计相关
搭建直播带货平台在样式、宽高、布局等设计相关代码
样式
使用了驼峰命名法,例如将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> );
以上就是 搭建直播带货平台在样式、宽高、布局等设计相关代码,更多内容欢迎关注之后的文章