### React Snippets #### ts/tsx js/jsx 代码提示 * `///`: ```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 { Button, 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 public constructor(props: Readonly<${1:IProps}>) { super(props); $1 } ``` * `cwm`: ```ts public componentWillMount() { $1 } ``` * `cdm`: ```ts public componentDidMount() { $1 } ``` * `cwum`: ```ts public componentWillUnmount() { $1 } ``` * `cwrp`: ```ts public componentWillReceiveProps(nextProps: Readonly) { $1 } ``` * `cwud`: ```ts public componentWillUpdate(nextProps: Readonly, nextState: Readonly) { $1 } ``` * `scud`: ```ts public shouldComponentUpdate(nextProps: Readonly, nextState: Readonly) { $1 } ``` * `cdud`: ```ts public componentDidUpdate(prevProps: Readonly, prevState: Readonly) { $1 } ``` * `cdc`: ```ts public 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 { Button, 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 { mario, bind } from 'mario-meditation'; import { inject, ViewModel } from 'mario-architecture-components'; import { $1Selector } from '../selector/index'; import { $1ViewModel, IViewModelProps } from '../view-model/index'; import { $1View } from '../view/index'; mario.model(require('../models/index')); export default bind($1Selector)(inject>($1View, $1ViewModel)); ``` * `rcdc` ```ts /** * Created by MeePwn * https://github.com/maybewaityou * * description: * */ import { mario, bind } from 'mario-meditation'; import { inject, ViewModel } from 'mario-architecture-components'; import { $1Selector } from '../selector/index'; import { $1ViewModel, IViewModelProps } from '../view-model/index'; import { $1View } from '../view/index'; export default dynamic({ models: () => [ require('../models/index') ], component: () => Promise.resolve(bind($1Selector)(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'; import { IError, IResponse } from 'task'; // import { } from '../actions/index'; // import { } from '../task/index'; export default { name: '$1', immutable: true, initialState: { }, epics: { }, }; ``` * `rcvm` ```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 { navigation: any; dispatch: (action: IAction) => any; } export default class extends ViewModel { public model = () => ({ }) public handlers = () => ({ }) } ```