React Native Component Snippets extension for Visual Studio Code

react-native内置组件标签、API代码自动补全。react文件Class结构、Hook结构、常用生命周期、常用Hook代码自动补全。

Install

在Extensions(Ctrl+Shift+X)搜索React Native Component Snippets安装。

Trigger Key	Element Tag
`$Alert`	`Alert.alert()`
`$Animated`	`Animated.timing()`
`$BackHandler`	`BackHandler.addEventListener()`
`$BackHandler`	`BackHandler.addEventListener()`
`$AsyncStorageGet`	`AsyncStorage.getItem()`
`$AsyncStorageSet`	`AsyncStorage.setItem()`
`$AsyncStorageRemove`	`AsyncStorage.removeItem()`
`$ClipboardGet`	`Clipboard.getString()`
`$ClipboardSet`	`Clipboard.setString()`
`$Dimensions`	`Dimensions.get('window')`
`$Linking`	`Linking.openURL()`

Trigger Key	Element Tag
`$cwm`	`componentWillMount = () => {}`
`$cdm`	`componentDidMount = () => {}`
`$cwr`	`componentWillReceiveProps = (nextProps) => {}`
`$scu`	`shouldComponentUpdate = (nextProps,nextState) => {}`
`$cwup`	`componentWillUpdate = (nextProps, nextState) => {}`
`$cdup`	`componentDidUpdate = (prevProps, prevState) => {}`
`$cwun`	`componentWillUnmount = () => {}`
`$render`	`render() { return () }`
`$setState`	`this.setState({})`
`$useState`	`const [state, setstate] = useState()`
`$useEffect`	`useEffect(()=>{},[])`
`$useContext`	`const context = useContext()`
`$useReducer`	`const [state, dispatch] = useReducer()`
`$useCallback`	`useCallback(()=>{},[])`
`$useMemo`	`useMemo(()=>{})`
`$useRef`	`const ref = useRef()`
`$useImperativeHandle`	`useImperativeHandle()`
`$useDebugValue`	`useDebugValue()`
`$useLayoutEffect`	`useLayoutEffect(()=>{},[])`
`$useSelector`	`const state = useSelector(state =>{})`
`$useDispatch`	`const dispatch = useDispatch()`
`$constructor`	`react的constructor`
`$fragment`	`<></>`
`$createRef`	`this.ref = React.createRef()`
`$createPortal`	`ReactDOM.createPortal(child, container)`
`$style`	`style={{}}`
`$import`	`import xxx from 'xxx'`
`$clg`	`console.log()`