搭建直播帶貨平臺在樣式、寬高、佈局等設計相關程式碼
樣式
使用了駝峰命名法，例如將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>
);

以上就是 搭建直播帶貨平臺在樣式、寬高、佈局等設計相關程式碼，更多內容歡迎關注之後的文章