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: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: ,
textAlign: 'center',
margin:
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom:
}
}); 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端自动更新效果。。。

react-native学习之入门app的更多相关文章

  1. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  2. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

  3. 如何用 React Native 创建一个iOS APP?

    诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...

  4. react native基础与入门

    react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...

  5. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  6. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  7. 如何用 React Native 创建一个iOS APP?(二)

    我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...

  8. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  9. react native 或 flutter 开发app

    react-native react native和原生Android/ios: https://www.oschina.net/news/97466/should-we-use-react-nati ...

  10. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

随机推荐

  1. const 与define 创建符号常量的 用法与区别

    一.define 的用法: 在c语言中我经常会看到 :#define  PI  12 ,这是创建了一个符号常量,这里面要注意没有那个等于号“=”: 二.const 的用法: 1.const 也可以来创 ...

  2. zTree第五章,zTree的nodes数据例子

    var nodes1 = [ { name: "小学", iconOpen: folderOpen, iconClose: folder, chkDisabled :true, c ...

  3. React-Native 工程添加推送功能 (iOS 篇)

    推送已经是是手机应用的基本功能,如果自己实现一套推送系统费时费力,所有一般我们会使用第三方的推送服务,这里我使用「极光推送」作为集成推送的例子,因为有现成的 react native 插件 jpush ...

  4. selenium上传图片

    在我们使用selenium的时候碰到上传图片.文件时一般都可以先定位然后直接send_keys,但是有的却不行,selenium也没有提供其它的办法,只能靠第三方软件来解决 我们要借助一个叫AutoI ...

  5. python高级(四)—— 文本和字节序列(编码问题)

    本文主要内容 字符 字节 结构体和内存视图 字符和字节之间的转换——编解码器 BOM鬼符  标准化Unicode字符串 Unicode文本排序 python高级——目录 文中代码均放在github上: ...

  6. Vue.js 的精髓——组件

    开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...

  7. redis安全(加入密码)

    一.前言 在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redis时候,最好更改默认端口, ...

  8. 论文阅读 | RefineDet:Single-Shot Refinement Neural Network for Object Detection

    论文链接:https://arxiv.org/abs/1711.06897 代码链接:https://github.com/sfzhang15/RefineDet 摘要 RefineDet是CVPR ...

  9. 基于spring和mybatis的简单项目流程

    Mybatis整合Spring配置 第一部分:配置Spring框架 配置SpringMVC的步骤 配置流程图 SpringMVC配置 导入包(基本包5个,1日志依赖包,2webmvc支持包) 构建一个 ...

  10. Java_方法的调用②及案例

    语法格式: 方法名称([参数列表]); //注意:只能调用本类的方法 案例: class Method01{ public static void print(){ for(int i = 1; i ...