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 条评论
登录 后参与评论

相关文章

来自专栏陈满iOS

iOS复习中有关SDWebImage可能知识点总结(2)

分为内存缓存(利用SDImageCache类的NSCache属性),磁盘缓存(利用NSFileManager),和操作缓存(利用runtime关联的字典属性)。...

2211
来自专栏iOS开发攻城狮的集散地

iOS AVPlayer视频播放器

7534
来自专栏一“技”之长

macOS开发之NSTableView的应用详解

    和iOS开发中的UITableView有很大差别,NSTableView并非是一个可滚动的列表视图,其是一个不可滚动、支持多列多行的原始列表视图。若要使...

2842
来自专栏ios 技术积累

聊聊怎么阅读SDWebImage源码

关于SDWebImage的介绍就不多说了,网上很多。我们主要聊聊怎么阅读SDWebImage的源码。 阅读源码前首先我们要思考几个问题: 1.SDWebIm...

911
来自专栏Python小屋

Python模拟汉诺塔问题移动盘子的过程

据说古代有一个梵塔,塔内有三个底座A、B、C,A座上有64个盘子,盘子大小不等,大的在下,小的在上。有一个和尚想把这64个盘子从A座移到C座,但每次只能允许移动...

5176
来自专栏飞扬的花生

可以添加自定义的Select控件

1.控件dom <select name="WebSiteTarget" id="WebSiteTarget" class="w1" onchange="edi...

2338
来自专栏技术总结

DWIntrosPage 简单定制引导页

下面摘取部分代码 DWIntrosPageContentViewController

1385
来自专栏iOS122-移动混合开发研究院

实现iOS图片等资源文件的热更新化(二):自定义的动态 imageNamed

这篇文章,要解决的是,使用一个自定义的 imageNamed 函数来替代系统的 imageNamed 函数.内部逻辑,将贯穿对比论证 关于"合适"的图片的定义....

2136
来自专栏陈满iOS

iOS网络请求之上传图片:从示例到源码解析 -- 以上传Face++SDK回调的图片为例(HYNetworking,AFNetworking,XMNetworking)

本文一开始上传图片以调用HYNetworking的API为例,这个网络框架是以AFNetworking为基础进行的封装。HYNetworking内部实现上传图片...

2532
来自专栏一“技”之长

iOS通过NSUserDefaults实现简单的应用间数据传递

NSUserDefaults是用于保存应用程序设置,应用信息等轻量级数据的的一个类,其本质是将数据写为plist文件的形式保存在本地。在IOS中,系统为每一个应...

932

扫码关注云+社区

领取腾讯云代金券