文档章节

react-native学习之入门app

c
 caiyezi
发布于 2016/11/08 20:24
字数 377
阅读 5
收藏 0

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端自动更新效果。。。

本文转载自:http://www.cnblogs.com/vipzhou/p/5499128.html

共有 人打赏支持
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
整理了一份React-Native学习指南

自己在学习React-Native过程中整理的一份学习指南,包含 教程、开源app和资源网站等,还在不断更新中。欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大...

太阳黑子
2016/11/03
34
0
React Native初体验

混合开发一直都比较想接触的技术,所以这几天就学习了下React Native的配置及JavaScript的基础,体验一把混合开发的魅力。 一、React Native介绍 Learn once,Write anywhere 以下内容来自:...

Ruheng
2017/10/24
0
0
React-Native学习资料

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn
2016/04/06
174
0
React-Native学习资料分享

React Native 构建 Facebook F8 2016 App / React Native 开发指南 f8-app.liaohuqiu.net/ React-Native入门指南 github.com/vczero/reac… 30天学习React Native教程 github.com/fangwei71......

codeGoogle
05/27
0
0
React Native 学习指南

本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 原文地址:https://github.com/ele828/react-native-guide 同时还有Awesome...

OSC编辑部
2015/07/09
4.8K
9

没有更多内容

加载失败,请刷新页面

加载更多

ERC1155实践|区块链游戏的平行宇宙和为此而生的Enjin钱包

1 摘要 恩金(Enjin)花了大半年的时间一直在完善ERC-1155这个通证协议,毫不夸张地说,该标准是现有以太坊上最适用于游戏资产的通证标准,将主流游戏中道具涉及到的一切操作经过高度抽象之后...

HiBlock
23分钟前
0
0
Oracle发布开源的轻量级 Java 微服务框架 Helidon

近日,Oracle推出了一个新的开源框架Helidon,该项目是一个用于创建基于微服务的应用程序的Java库集合。和Payara Micro、Thorntail(之前的WildFly Swarm)、OpenLiberty、TomEE等项目一样,...

关注公众号_搜云库_每天更新
29分钟前
0
0
启动线程以及安全终止线程

启动 使用start()方法可以启动线程。 start()方法的含义是告知线程规划器线程已初始化完毕,可以分给这个线程时间片了(执行run()方法)。 安全终止线程 示例代码 import java.util.concurr...

karma123
35分钟前
1
0
Python+OpenCV 图像风格迁移(模仿名画)

现在很多人都喜欢拍照(自拍)。有限的滤镜和装饰玩多了也会腻,所以就有 APP 提供了模仿名画风格的功能,比如 prisma、versa 等,可以把你的照片变成 梵高、毕加索、蒙克 等大师的风格。 这...

crossin
40分钟前
1
0
karabiner json语法

karabiner json语法 to_if_alone 如果同时制定了to, 那么to对应的key必须是非可见字符,例如control,shift或者command, 为什么呢? If to events are specified, to events are released befo...

黄威
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部