### React Snippets #### ts/tsx 代码提示 * `///`: ```ts /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ ``` * `mi`: ```ts import $1 from '$2'; ``` * `mis`: ```ts import styled from 'styled-components'; ``` * `minav`: ```ts import { NavigationActions } from 'react-navigation'; ``` * `mimed`: ```ts import { actionCreator, actions, ActionsObservable, BATCH_ACTIONS, epicCreator, flowable, IAction, mutate, replace } from 'mario-meditation'; ``` * `miuti`: ```ts import { $1 } from 'mario-utilities'; ``` * `miarch`: ```ts import { $1 } from 'mario-architecture-components'; ``` * `mirn`: ```ts import { Image, ImageStyle, StyleSheet, Text, TextStyle, View, ViewStyle, } from 'react-native'; ``` * `ps`: ```ts this.props. ``` * `st`: ```ts this.state. ``` * `sst`: ```ts this.setState({ $1 }); ``` * `ssf`: ```ts this.setState((prevState: any, props: any) => ({ $1 })); ``` * `source`: ```ts source={$1} ``` * `style`: ```ts style={$1} ``` * `numberOfLines`: ```ts numberOfLines={$1} ``` * `activeOpacity`: ```ts activeOpacity={$1} ``` * `resizeMode`: ```ts resizeMode=$1 ``` * `cover`: ```ts 'cover' ``` * `contain`: ```ts 'contain' ``` * `stretch`: ```ts 'stretch' ``` * `repeat`: ```ts 'repeat' ``` * `center`: ```ts 'center' ``` * `onPress`: ```ts onPress={$1} ``` * `onChangeText`: ```ts onChangeText={$1} ``` * `onChange`: ```ts onChange={$1} ``` * `value`: ```ts value={$1} ``` * `multiline`: ```ts multiline={$1} ``` * `actionCreator`: ```ts actionCreator($1) ``` * `createAction`: ```ts createAction($1)($2)$3 ``` * `mreducer`: ```ts $1(state: any, payload: any) { return mutate(state, { $1: payload }); }, ``` * `arrow`: ```ts ($1) => { $2 } ``` * `setTimeout`: ```ts setTimeout(() => { $1 }); ``` * `promise`: ```ts new Promise((resolve, reject) => { $1 }); ``` * `fore`: ```ts $1.forEach((item: any, index: number) => { $2 }); ``` * `map`: ```ts $1.map((item: any) => $2); ``` * `filter`: ```ts $1.filter((item: any) => $2); ``` * `dob`: ```ts const { $2 } = $1; ``` * `dar`: ```ts const [ $2 ] = $1; ``` * `bnd`: ```ts @bind(({ }: any) => { $1 }) ``` * `constructor`: ```ts constructor(props: Readonly<${1:IProps}>) { super(props); $1 } ``` * `cwm`: ```ts componentWillMount() { $1 } ``` * `cdm`: ```ts componentDidMount() { $1 } ``` * `cwum`: ```ts componentWillUnmount() { $1 } ``` * `cwrp`: ```ts componentWillReceiveProps(nextProps: Readonly) { $1 } ``` * `cwud`: ```ts componentWillUpdate(nextProps: Readonly, nextState: Readonly) { $1 } ``` * `scud`: ```ts shouldComponentUpdate(nextProps: Readonly, nextState: Readonly) { $1 } ``` * `cdud`: ```ts componentDidUpdate(prevProps: Readonly, prevState: Readonly) { $1 } ``` * `cdc`: ```ts componentDidCatch(error: Error, errorInfo: ErrorInfo) { $1 } ``` * `ren`: ```ts public render() { return ( $1 ); } ``` * `pt`: ```ts $1: PropTypes.$2, ``` * `ptr`: ```ts $1: PropTypes.$2.isRequired, ``` * `ssc`: ```ts const styles = StyleSheet.create({ container: { $1 }, }); ``` * `flex`: ```ts flex: $1, ``` * `justifyContent`: ```ts justifyContent: '${1:center}', ``` * `ai`: ```ts alignItems: '${1:center}', ``` * `as`: ```ts alignSelf: '${1:center}', ``` * `flex-start`: ```ts 'flex-start' ``` * `flex-end`: ```ts 'flex-end' ``` * `center`: ```ts 'center' ``` * `space-between`: ```ts 'space-between' ``` * `space-around`: ```ts 'space-around' ``` * `borderBottomWidth`: ```ts borderBottomWidth: $1, ``` * `borderLeftWidth`: ```ts borderLeftWidth: $1, ``` * `borderRightWidth`: ```ts borderRightWidth: $1, ``` * `borderTopWidth`: ```ts borderTopWidth: $1, ``` * `borderWidth`: ```ts borderWidth: $1, ``` * `flexDirection`: ```ts flexDirection: $1, ``` * `row`: ```ts 'row' ``` * `row-reverse`: ```ts 'row-reverse' ``` * `column`: ```ts 'column' ``` * `column-reverse`: ```ts 'column-reverse' ``` * `height`: ```ts height: $1, ``` * `width`: ```ts width: $1, ``` * `margin`: ```ts margin: $1, ``` * `marginBottom`: ```ts marginBottom: $1, ``` * `marginLeft`: ```ts marginLeft: $1, ``` * `marginRight`: ```ts marginRight: $1, ``` * `marginTop`: ```ts marginTop: $1, ``` * `marginHorizontal`: ```ts marginHorizontal: $1, ``` * `marginVertical`: ```ts marginVertical: $1, ``` * `maxHeight`: ```ts maxHeight: $1, ``` * `maxWidth`: ```ts maxWidth: $1, ``` * `minHeight`: ```ts minHeight: $1, ``` * `minWidth`: ```ts minWidth: $1, ``` * `overflow`: ```ts overflow: $1, ``` * `visible`: ```ts 'visible' ``` * `hidden`: ```ts 'hidden' ``` * `scroll`: ```ts 'scroll' ``` * `padding`: ```ts padding: $1, ``` * `paddingBottom`: ```ts paddingBottom: $1, ``` * `paddingHorizontal`: ```ts paddingHorizontal: $1, ``` * `paddingLeft`: ```ts paddingLeft: $1, ``` * `paddingRight`: ```ts paddingRight: $1, ``` * `paddingTop`: ```ts paddingTop: $1, ``` * `paddingVertical`: ```ts paddingVertical: $1, ``` * `position`: ```ts position: $1, ``` * `zIndex`: ```ts zIndex: $1, ``` * `top`: ```ts top: $1, ``` * `left`: ```ts left: $1, ``` * `right`: ```ts right: $1, ``` * `bottom`: ```ts bottom: $1, ``` * `fontSize`: ```ts fontSize: $1, ``` * `fontWeight`: ```ts fontWeight: '$1', ``` * `bold`: ```ts 'bold' ``` * `backgroundColor`: ```ts backgroundColor: '$1', ``` * `borderColor`: ```ts borderColor: '$1', ``` * `borderTopColor`: ```ts borderTopColor: '$1', ``` * `borderRightColor`: ```ts borderRightColor: '$1', ``` * `borderBottomColor`: ```ts borderBottomColor: '$1', ``` * `borderLeftColor`: ```ts borderLeftColor: '$1', ``` * `borderRadius`: ```ts borderRadius: $1, ``` * `borderTopLeftRadius`: ```ts borderTopLeftRadius: $1, ``` * `borderTopRightRadius`: ```ts borderTopRightRadius: $1, ``` * `borderBottomLeftRadius`: ```ts borderBottomLeftRadius: $1, ``` * `borderBottomRightRadius`: ```ts borderBottomRightRadius: $1, ``` * `borderStyle`: ```ts borderStyle: '$1', ``` * `solid`: ```ts 'solid' ``` * `dotted`: ```ts 'dotted' ``` * `dashed`: ```ts 'dashed' ``` * `opacity`: ```ts opacity: $1 ``` * `newe`: ```ts $1Epic(action$: ActionsObservable, store: any, dependencies: any) { return epicCreator(action$)($2)((action: IAction) => $3Task(action.payload.toJS()) .map((response: any) => { $4 return actionCreator(NETWORK_SUCCESS); }) .catch((error: IError) => { return flowable(actionCreator(NETWORK_FAILURE)); }), ); }, ``` * `rcv` ```ts /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ import React from 'react'; import { IViewModelProps } from '../view-model/index'; export default (props: Readonly) => (

); const styles = { container: { }, }; ``` * `rncv` ```ts /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ import React from 'react'; import { Image, ImageStyle, StyleSheet, Text, TextStyle, View, ViewStyle, } from 'react-native'; import { IViewModelProps } from '../view-model/index'; export interface IStyle { container: ViewStyle; } export default (props: Readonly) => ( ); const styles = StyleSheet.create({ container: { }, }); ``` * `rcc` ```ts /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ import { inject, ViewModel } from 'mario-architecture-components'; import { mario, bind } from 'mario-meditation'; import { mapStateToProps } from '../selector/index'; import { $1ViewModel, IViewModelProps } from '../view-model/index'; import { $1View } from '../view/index'; mario.model(require('../model/index')); export default bind(mapStateToProps)(inject>($1View, $1ViewModel)); ``` * `rcm` ```ts /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ import { actionCreator, actions, ActionsObservable, BATCH_ACTIONS, epicCreator, flowable, IAction, mutate } from 'mario-meditation'; import { log, toString } from 'mario-utilities'; import { NETWORK_FAILURE, NETWORK_SUCCESS } from '../../../dataflow/actions/index'; import { IError, IResponse } from '../../../main/task/index'; import { } from '../actions/index'; import { } from '../task/index'; export default { name: '$1', immutable: true, initialState: { }, epics: { }, }; ``` * `rvv` ```ts /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ import { ViewModel } from 'mario-architecture-components'; import { actions, actionCreator, createAction, IAction } from 'mario-meditation'; import { } from '../actions/index'; export interface IModel { } export interface IHandlers { } export interface IViewModelProps extends IModel, IHandlers { dispatch: (action: IAction) => any; } export default class extends ViewModel { public model = () => ({ }) public handlers = () => ({ }) } ``` #### js 代码提示 * `///`: ```js /** * Created by MeePwn * https://github.com/maybewaityou * * @flow * * description: * */ ``` * `mi`: ```js import $1 from '$2'; ``` * `mirn`: ```js import { StyleSheet, Text, Image, View, } from 'react-native'; ``` * `ps`: ```js this.props. ``` * `st`: ```js this.state. ``` * `sst`: ```js this.setState({ $1 }); ``` * `source`: ```js source={$1} ``` * `style`: ```js style={$1} ``` * `numberOfLines`: ```js numberOfLines={$1} ``` * `activeOpacity`: ```js activeOpacity={$1} ``` * `resizeMode`: ```js resizeMode=$1 ``` * `cover`: ```js 'cover' ``` * `contain`: ```js 'contain' ``` * `stretch`: ```js 'stretch' ``` * `repeat`: ```js 'repeat' ``` * `center`: ```js 'center' ``` * `onPress`: ```js onPress={$1} ``` * `onChangeText`: ```js onChangeText={$1} ``` * `onChange`: ```js onChange={$1} ``` * `value`: ```js value={$1} ``` * `multiline`: ```js multiline={$1} ``` * `arrow`: ```js ($1) => { $2 } ``` * `fore`: ```js $1.forEach((item, index) => { $2 }); ``` * `map`: ```js $1.map(item => $2); ``` * `filter`: ```js $1.filter(item => $2); ``` * `constructor`: ```js constructor(props) { super(props); $1 } ``` * `cwm`: ```js componentWillMount() { $1 } ``` * `cdm`: ```js componentDidMount() { $1 } ``` * `cwum`: ```js componentWillUnmount() { $1 } ``` * `cwrp`: ```js componentWillReceiveProps(nextProps) { $1 } ``` * `cwud`: ```js componentWillUpdate(nextProps, nextState) { $1 } ``` * `scud`: ```js shouldComponentUpdate(nextProps, nextState) { $1 } ``` * `cdud`: ```js componentDidUpdate(prevProps, prevState) { $1 } ``` * `cdc`: ```js componentDidCatch(error, errorInfo) { $1 } ``` * `pt`: ```js $1: PropTypes.$2, ``` * `ptr`: ```js $1: PropTypes.$2.isRequired, ``` * `ssc`: ```js const styles = StyleSheet.create({ container: { $1 }, }); ``` * `flex`: ```js flex: $1, ``` * `justifyContent`: ```js justifyContent: '${1:center}', ``` * `ai`: ```js alignItems: '${1:center}', ``` * `as`: ```js alignSelf: '${1:center}', ``` * `flex-start`: ```js 'flex-start' ``` * `flex-end`: ```js 'flex-end' ``` * `center`: ```js 'center' ``` * `space-between`: ```js 'space-between' ``` * `space-around`: ```js 'space-around' ``` * `borderBottomWidth`: ```js borderBottomWidth: $1, ``` * `borderLeftWidth`: ```js borderLeftWidth: $1, ``` * `borderRightWidth`: ```js borderRightWidth: $1, ``` * `borderTopWidth`: ```js borderTopWidth: $1, ``` * `borderWidth`: ```js borderWidth: $1, ``` * `flexDirection`: ```js flexDirection: $1, ``` * `row`: ```js 'row' ``` * `row-reverse`: ```js 'row-reverse' ``` * `column`: ```js 'column' ``` * `column-reverse`: ```js 'column-reverse' ``` * `height`: ```js height: $1, ``` * `width`: ```js width: $1, ``` * `margin`: ```js margin: $1, ``` * `marginBottom`: ```js marginBottom: $1, ``` * `marginLeft`: ```js marginLeft: $1, ``` * `marginRight`: ```js marginRight: $1, ``` * `marginTop`: ```js marginTop: $1, ``` * `marginHorizontal`: ```js marginHorizontal: $1, ``` * `marginVertical`: ```js marginVertical: $1, ``` * `maxHeight`: ```js maxHeight: $1, ``` * `maxWidth`: ```js maxWidth: $1, ``` * `minHeight`: ```js minHeight: $1, ``` * `minWidth`: ```js minWidth: $1, ``` * `overflow`: ```js overflow: $1, ``` * `visible`: ```js 'visible' ``` * `hidden`: ```js 'hidden' ``` * `scroll`: ```js 'scroll' ``` * `padding`: ```js padding: $1, ``` * `paddingBottom`: ```js paddingBottom: $1, ``` * `paddingHorizontal`: ```js paddingHorizontal: $1, ``` * `paddingLeft`: ```js paddingLeft: $1, ``` * `paddingRight`: ```js paddingRight: $1, ``` * `paddingTop`: ```js paddingTop: $1, ``` * `paddingVertical`: ```js paddingVertical: $1, ``` * `position`: ```js position: $1, ``` * `zIndex`: ```js zIndex: $1, ``` * `top`: ```js top: $1, ``` * `left`: ```js left: $1, ``` * `right`: ```js right: $1, ``` * `bottom`: ```js bottom: $1, ``` * `fontSize`: ```js fontSize: $1, ``` * `fontWeight`: ```js fontWeight: '$1', ``` * `bold`: ```js 'bold' ``` * `backgroundColor`: ```js backgroundColor: '$1', ``` * `borderColor`: ```js borderColor: '$1', ``` * `borderTopColor`: ```js borderTopColor: '$1', ``` * `borderRightColor`: ```js borderRightColor: '$1', ``` * `borderBottomColor`: ```js borderBottomColor: '$1', ``` * `borderLeftColor`: ```js borderLeftColor: '$1', ``` * `borderRadius`: ```js borderRadius: $1, ``` * `borderTopLeftRadius`: ```js borderTopLeftRadius: $1, ``` * `borderTopRightRadius`: ```js borderTopRightRadius: $1, ``` * `borderBottomLeftRadius`: ```js borderBottomLeftRadius: $1, ``` * `borderBottomRightRadius`: ```js borderBottomRightRadius: $1, ``` * `borderStyle`: ```js borderStyle: '$1', ``` * `solid`: ```js 'solid' ``` * `dotted`: ```js 'dotted' ``` * `dashed`: ```js 'dashed' ``` * `opacity`: ```js opacity: $1 ``` * `rncv`: ```js /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ import * as React, { Component } from 'react'; import { PropTypes } from 'prop-types'; import { pureRender } from 'mario-pure'; import { StyleSheet, Text, Image, View, } from 'react-native'; const propTypes = { }; const defaultProps = { }; const defaultState = { }; @pureRender export default class extends Component { constructor(props) { super(props); this.state = defaultState; } render() { return ( $2 ); } } $1View.propTypes = propTypes; $1View.defaultProps = defaultProps; const styles = StyleSheet.create({ container: { flex: 1, }, }); ``` * `rncc`: ```js /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ import * as React from 'react'; import { PropTypes } from 'prop-types'; import { bind } from 'mario-meditation'; import { PureComponent } from 'mario-pure'; import $1View from '../view/$1View'; const propTypes = { dispatch: PropTypes.func.isRequired, }; const defaultProps = { }; const defaultState = { }; @bind((state) => ({ })) export default class extends PureComponent { constructor(props) { super(props); this.state = defaultState; } render() { return ( <$1View /> ); } } $1Container.propTypes = propTypes; $1Container.defaultProps = defaultProps; ```