react-native学习之入门app

1、项目初始化:

react-native init MyProject

2、启动项目:

cd MyProject
react-native start

新开cmd窗口:

react-native run-android

3、源代码分析:

附上index.android.js文件:

/*
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

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

class MyProject extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Shake or press menu button for dev menu!This is enable hot!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

AppRegistry.registerComponent('MyProject', () => MyProject);

首先import引入react|react-native的相关组件模块,这样我们自定义组件的时候可以直接返回react自身的元素(react组件自定义时,必须实现render方法,并且返回一个react element,而且有且仅有一个被包含的顶层元素)

然后通过extends继承Component组件,实现render方法,返回一个包含View布局,内嵌三个Text控件的react element,至于Text组件的style定义,同react中一致,可以是一个有效的以大括号括起来的js表达式或对象,如styles,最后通过AppRegistry.registerComponent将组件注册暴露使用。。。

4、真机运行时,可以摇晃手机,在弹出的工具框中选择Reload Js,进行js代码的重新安装,可以直接看到修改后的运行效果,也可以直接单击选中“支持热更新”,从而实现ide中更新后,app端自动更新效果。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏西安-晁州

nodejs操作excel并配合edatagrid使用

nodejs读取文件夹下子文件(夹)名称: /** * 查询tmp文件夹下子文件夹名称 */ router.post("/tmpList", functio...

2940
来自专栏叁金大数据

自学Python九 爬虫实战二

  作为一个新世纪有思想有文化有道德时刻准备着的屌丝男青年,在现在这样一个社会中,心疼我大慢播抵制大百度的前提下,没事儿上上网逛逛YY看看斗鱼翻翻美女图片那是必...

893
来自专栏逸鹏说道

探索ASP.NET MVC5系列之~~~2.视图篇(上)---包含XSS防御和异步分部视图的处理

其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/d...

3227
来自专栏张善友的专栏

微软反跨站脚本库3.0 RTM

跨站脚本Cross-Site Scripting(XSS)又叫CSS (Cross Site Script) ,跨站脚本攻击。它指的是恶意攻击者往Web页面里插...

1766
来自专栏肖洒的博客

【爬虫】(四)西电研究生教务系统技术文档

关于教务系统的一系列爬取工作已经初步完成,Holi爬虫组的工作也算正式进入优化阶段。 我们需要根据后台组的需要,转换成CVS或数据库形式。需要和后台组进行商量。...

2561
来自专栏ionic3+

【组件篇】ionic3分组索引及锚点滚动列表

好久没有写文章了,趁着吃完饭消化的时候打算写一篇。先前一篇文章提到并关注的capacitor终于出到1.0.0-alpha.5了,本想写它,但是内容比较多,所以...

1042
来自专栏FreeBuf

XXE漏洞利用技巧:从XML到远程代码执行

如果你的应用是通过用户上传处理XML文件或POST请求(例如将SAML用于单点登录服务甚至是RSS)的,那么你很有可能会受到XXE的攻击。XXE是一种非常常见的...

1162
来自专栏IMWeb前端团队

如何用Node去写一个Web应用框架

第一步,用node输出一个hello world var http=require('http'); http.createServer(function(re...

2778
来自专栏前端人人

React第三方组件2(状态管理之Refast的使用①简单使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件2(状态管理之Refast的使用①...

4247
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaMail开发示例,学习要看对资料

JavaMail 邮件协议 1 收发邮件 发邮件大家都会吧!发邮件是从客户端把邮件发送到邮件服务器,收邮件是把邮件服务器的邮件下载到客户端。 ? ? 我们在16...

2504

扫码关注云+社区