WebStorm RN代码模板

RN模板

import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";

const App = () => {
    return (
        <View style={styles.container} >
            <Text style={styles.text}>Hello World!</Text>
        </View>
    );
};

export default class AppComponent extends Component {
    render() {
        return (
            <View style={styles.container} >
                <Text style={styles.text}>Hello World!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row", // 布局方向('row', 'row-reverse', 'column', 'column-reverse')
        flexWrap: "nowrap", // 主轴是否自动换行('wrap', 'nowrap', 'wrap-reverse')
        justifyContent: "center", //子视图主轴布局('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')
        alignItems: "center", // 子视图副轴布局('flex-start', 'flex-end', 'center', 'stretch', 'baseline')
        alignSelf: "auto", // 覆盖父视图的副轴布局('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')
        alignContent: "flex-start", // 换行时副轴的对齐方式('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around')
        backgroundColor: "#FFFFFF",
        //width: 100,
        //height: 40,
        //position: "relative", //(绝对位置'absolute', 相对位置'relative')
        //borderWidth: 0,
        //borderColor: "red",
        //margin: 0, //外边距
        //padding: 0, //内边距
    },
    text: {
        color: '#000000',
        fontSize: 16,
    },
});

代码块

rnimport

import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";

rnfun

const $App$ = () => {
    return (
        <View style={{}} >
            <Text style={{}} >$App$</Text>
        </View>
    );
};

rnclass

export class $App$ extends Component {
    render() {
        return (
            <View style={{}} >
                <Text style={{}} >$App$</Text>
            </View>
        );
    }
}

rnstyle

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row", // 布局方向('row', 'row-reverse', 'column', 'column-reverse')
        flexWrap: "nowrap", // 主轴是否自动换行('wrap', 'nowrap', 'wrap-reverse')
        justifyContent: "center", //子视图主轴布局('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')
        alignItems: "center", // 子视图副轴布局('flex-start', 'flex-end', 'center', 'stretch', 'baseline')
        alignSelf: "auto", // 覆盖父视图的副轴布局('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')
        alignContent: "flex-start", // 换行时副轴的对齐方式('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around')
        backgroundColor: "#FFFFFF",
        //width: 100,
        //height: 40,
        //position: "relative", //(绝对位置'absolute', 相对位置'relative')
        //borderWidth: 0,
        //borderColor: "red",
        //margin: 0, //外边距
        //padding: 0, //内边距
    },
    text: {
        color: '#000000',
        fontSize: 16,
    },
});