vs code中的react native代码模板

最新推荐文章于 2024-08-16 07:38:03 发布

1533158184

最新推荐文章于 2024-08-16 07:38:03 发布

阅读量545

点赞数

本文链接：https://blog.csdn.net/qq_35784996/article/details/124911089

版权

Android 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、从文件–>首选项–>用户片段可以新建或编辑用户代码模板

2、react native的代码模板如下（还可以添加作者，时间等信息）

{
    "React-Native Class":{
        "scope": "javascript,typescript",
        "prefix": "rncode",
        "body": [
            "import React, { Component } from 'react'",
            "import { StyleSheet, View, Text, Image } from 'react-native'",
            "",
            "export default class $TM_FILENAME_BASE extends Component {",
            "",
            "\trender() {",
            "\t\treturn(",
            "\t\t\t<View style={styles.container}>",
            "\t\t\t\t",
            "\t\t\t</View>",
            "\t\t)",
            "\t}",
            "",
            "}",
            "",
            "const styles = StyleSheet.create({",
            "\tcontainer: {",
            "\t\tflex: 1",
            "\t}",
            "})",
        ],
        "description": "创建一个React-Native类"
    }
}

3、最终效果如下

import React, { Component } from 'react'
import { StyleSheet, View, Text, Image } from 'react-native'

export default class Father extends Component {

    render() {
        return(
            <View style={styles.container}>
                
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})