隨著代碼復(fù)雜性的提高,對(duì)代碼進(jìn)行分層以及抽象是十分必要的.今天我們就對(duì)RN的項(xiàng)目結(jié)構(gòu)進(jìn)行簡(jiǎn)單的梳理.
這里主要是對(duì)樣式文件和組件進(jìn)行分離.可以以業(yè)務(wù)模塊或者以頁(yè)面的形式劃分層級(jí).具體結(jié)構(gòu)如下
- [ ] Project ROOT
- [ ] index.ios.js
- [ ] index.android.js
- [ ] android
- [ ] ios
- [ ] resources -- 存放各類(lèi)靜態(tài)資源文件
- [ ] src -- 源代碼目錄
- [ ] module --業(yè)務(wù)模塊
- [ ] module.js -- 業(yè)務(wù)模塊組件
- [ ] module.style.js -- 業(yè)務(wù)模塊樣式
- [ ] module --業(yè)務(wù)模塊
目前關(guān)于RN的分層結(jié)構(gòu)沒(méi)有特定的最佳實(shí)踐,大家可以根據(jù)自己的理解進(jìn)行組織.
這里之所以將樣式文件與業(yè)務(wù)模塊同級(jí)存放主要是由于在import的時(shí)候from語(yǔ)句后面的參數(shù)是依據(jù)當(dāng)前文件所在的相對(duì)路徑進(jìn)行查找,存放在同級(jí)目錄可以比較方便的進(jìn)行引用.Login.js中如果需要引入Login.style.js可如下書(shū)寫(xiě)
Module.js
'use strict'
import React,{View,Text} from 'react-native'
{/**這里styles是引入后的別名,可以在需要的地方以style.xxxx的方式引用樣式 */}
import styles from './Login.style.js';
export default class Login extends React.Component{
render(){
return (
<View style={styles.container}>
<Text>Hello,Tom</Text>
</View>
)
}
}
具體樣式類(lèi)書(shū)寫(xiě)的例子
Module.style.js
'use strict';
import React, {StyleSheet} from 'react-native';
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
module.exports = styles;
如此一來(lái)我們的入口文件直接引用Module進(jìn)行展現(xiàn)即可
index.android.js
'use strict';
import React,{AppRegistry} from 'react-native';
{/**Login */}
import Login from './src/module/Login.js';
class TaraRn extends React.Component {
render() {
return (
<Login/>
)
}
}
AppRegistry.registerComponent('TaraRn', () => TaraRn);
