RocketNative Snippets

（已弃用）Rocketseat React Native代码片段，用于Sublime Text编辑器

详情

版本 2.0.0
主页 github.com
修改时间 7年前
上次查看 2小时前
首次查看 7年前

安装

总数 492
Win 257
Mac 120
Linux 115

	2023年8月6日	2023年8月5日	2023年8月4日	2023年8月3日	2023年8月2日	2023年8月1日	2023年7月31日	2023年7月30日	2023年7月29日	2023年7月28日	2023年7月27日	2023年7月26日	2023年7月25日	2023年7月24日	2023年7月23日	2023年7月22日	2023年7月21日	2023年7月20日	2023年7月19日	2023年7月18日	2023年7月17日	2023年7月16日	2023年7月15日	2023年7月14日	2023年7月13日	2023年7月12日	2023年7月11日	2023年7月10日	2023年7月9日	2023年7月8日	2023年7月7日	2023年7月6日	2023年7月5日	2023年7月4日	2023年7月3日	2023年7月2日	2023年7月1日	2023年6月30日	2023年6月29日	2023年6月28日	2023年6月27日	2023年6月26日	2023年6月25日	2023年6月24日	2023年6月23日
Windows	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Mac	1	1	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0

说明

源码: raw.githubusercontent.com

（已弃用）

🚨 嘿，此存储库已弃用，并将不再进行积极维护！

RocketNative Snippets

Sublime Text的React Native代码片段

概述

安装
使用方法
- 组件
- ESLint
- Redux
- Reactotron
- Babel
- Apisauce

Demo

安装

通过Package Control安装，搜索“RocketNative Snippets”。如果您还没有Sublime Text中的Package Control，请获取它。这是一件纯粹的优秀事物。

使用方法

组件

（component）- 创建react-native组件

/* Core */
import React, { Component } from 'react';

/* Presentational */
import { View } from 'react-native';

// import styles from './styles';

export default class MyComponent extends Component {
  render() {
    return (
      <View />
    );
  }
}

（proptypes）- 创建组件propTypes

static propTypes = {

};

（defaultProps）- 创建组件defaultProps

static defaultProps = {

};

（render）- 创建渲染方法

render() {
  return (
    <View />
  );
}

ESLint

（eslint）- 创建ESLint文件配置

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "jest": true
  },
  "plugins": [
    "react-native",
    "jsx-a11y",
    "import"
  ],
  "extends": [
    "airbnb",
    "plugin:react-native/all"
  ],
  "rules": {
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
    "global-require": "off",
    "no-console": "off",
    "import/prefer-default-export": "off",
    "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}]
  },
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
  "globals": {
    "__DEV__": true
  }
}

Redux

（reduxSetup）- 创建Redux设置文件

import { combineReducers } from 'redux';

/* Reducers */
// import navReducer from 'navigation/reducer';

import configureStore from './configureStore';
// import rootSaga from './sagas';

export default () => {
  const rootReducer = combineReducers({
    // nav: navReducer,
  });

  return configureStore(rootReducer, rootSaga);
};

（configureStore）- 创建configureStore文件

import { createStore, applyMiddleware, compose } from 'redux';

export default (rootReducer) => {
  const middleware = [];
  const enhancers = [];

  /* Saga */
  // const sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null;
  // const sagaMiddleware = createSagaMiddleware({ sagaMonitor });
  // middleware.push(sagaMiddleware);

  enhancers.push(applyMiddleware(...middleware));

  /* Store */
  const createAppropriateStore = __DEV__ ? console.tron.createStore : createStore;
  const store = createAppropriateStore(rootReducer, compose(...enhancers));

  /* Run Saga */
  // sagaMiddleware.run(rootSaga);

  return store;
};

（reduxComponent）- 创建react-native Redux组件

/* Core */
import React, { Component } from 'react';

/* Presentational */
import { View } from 'react-native';

/* Redux */
import { connect } from 'react-redux';

// import styles from './styles';

class  extends Component {
  render() {
    return (
      <View />
    );
  }
}

const mapStateToProps = state => ({

});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps)();

（mapStateToProps）- 创建redux mapStateToProps

const mapStateToProps = state => ({

});

（mapDispatchToProps）- 创建redux mapDispatchToProps

const mapDispatchToProps = dispatch => ({

});

（duck）- 创建react-native duck模块

import { createReducer, createActions } from 'reduxsauce';
import Immutable from 'seamless-immutable';

/* Types & Action Creators */

const { Types, Creators } = createActions({
  // actionType: ['dataPassed'],
});

export const TesteTypes = Types;
export default Creators;

/* Initial State */

export const INITIAL_STATE = Immutable({
  // data: [],
});

/* Reducers */

// export const reducer = state =>
//   state.merge({ data: [] });

/* Reducers to types */

export const reducer = createReducer(INITIAL_STATE, {
  // [Types.ACTION_TYPE]: reducer,
});

Reactotron

（reactotronconfig）- 创建Reactotron配置

import Reactotron from 'reactotron-react-native';

if (__DEV__) {
  const tron = Reactotron
    .configure()
    .useReactNative()
    .connect();

  tron.clear();

  console.tron = tron;
}

Babel

（moduleResolver）- 创建模块解析配置

"plugins": [
  [
    "module-resolver",
    {
      "root": ["./src"],
      "extensions": [".js", ".ios.js", ".android.js"]
    }
  ]
]

Apisauce

（apisauce）- 创建APISauce配置

import { create } from 'apisauce';

const api = create({
  baseURL: 'http://localhost:3000',
});

export default api;