隨著代碼復雜性的提高,對代碼進行分層以及抽象是十分必要的.今天我們就對RN的項目結構進行簡單的梳理.
這里主要是對樣式文件和組件進行分離.可以以業務模塊或者以頁面的形式劃分層級.具體結構如下
- [ ] Project ROOT
- [ ] index.ios.js
- [ ] index.android.js
- [ ] android
- [ ] ios
- [ ] resources -- 存放各類靜態資源文件
- [ ] src -- 源代碼目錄
- [ ] module --業務模塊
- [ ] module.js -- 業務模塊組件
- [ ] module.style.js -- 業務模塊樣式
- [ ] module --業務模塊
目前關于RN的分層結構沒有特定的最佳實踐,大家可以根據自己的理解進行組織.
這里之所以將樣式文件與業務模塊同級存放主要是由于在import的時候from語句后面的參數是依據當前文件所在的相對路徑進行查找,存放在同級目錄可以比較方便的進行引用.Login.js中如果需要引入Login.style.js可如下書寫
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>
)
}
}
具體樣式類書寫的例子
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;
如此一來我們的入口文件直接引用Module進行展現即可
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);
