4.5 Naming convention

1.Containers & Components

1.1. Container file:

1. src/containers/ModuleNameView.js

Component files:

1. src/components/module-name-view
2. - index.js
3. - Main.js
4. - Header.js
5. - ...
6. - img
7. - icon@2x.png
8. - icon@3x.png

1.2. Event name:

1. handleEventName = ()=>{//todo}
2. ...
3. <MyComponent onEventName={this.handleEventName}/>

1.3. Render methods:

1. renderMethodName = () => {
2. //todo
3. }
4. render() {
5. return (
6. <View>
7. {this.renderMethodName()}
8. </View>
9. );
10. }
11. `

1.4. mapStateToProps & mapDispatchToProps

1. function mapStateToProps(state) {
2. return {
3. todos: state.todos
4. };
5. }

7. function mapDispatchToProps(dispatch) {
8. return {
9. actions: bindActionCreators(Actions, dispatch)
10. }
11. }

2.actions src/actions

1. index.js
2. todos.js
3. navigation.js

2.1src/constants/ActionTypes.js

1. export const SWITCH_MAIN_TAB = 'SWITCH_MAIN_TAB';

2.2rc/actions/todos.js

1. import * as types from '../constants/ActionTypes'

3. export function addTodo(title, hour) {
4. return {type: types.ADD_TODO, title, hour}
5. }

3.reducerssrc/reducers

1. index.js
2. todos.js
3. navigation.js

3.1.src/reducers/todos.js

1. import { ADD_TODO, DELETE_TODO, EDIT_TODO, COMPLETE_TODO } from '../constants/ActionTypes'
2. const initialState = []

4. export default function todos(state = initialState, action) {
5. switch (action.type) {
6. case ADD_TODO:
7. //todo
8. default:
9. return state
10. }
11. }

4.stylessrc/styles

1. index.js
2. Basic.js
3. Theme.js

4.1src/styles/Basic.js

1. import { StyleSheet, Dimensions } from 'react-native';
2. let winSize = Dimensions.get('window');
3. const Basic = StyleSheet.create({
4. text: {
5. fontSize: 32/winSize.scale
6. }
7. });
8. export default Basic;

4.2src/styles/Theme.js

1. //colors
2. const color = {
3. green: '#00551e',
4. brown: '#693504',
5. red: '#db2828'
6. }

8. //other
9. const active = {
10. opacity: 0.6
11. }

13. export default {color, active}

4.3import {Theme, BasicStyle} from '../../styles';

原文: <https://unbug.gitbooks.io/react-native-training/content/45_naming_convention.html>