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.2```src/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