1、项目初始化:

  1. react-native init MyProject

2、启动项目:

  1. cd MyProject
  2. react-native start

新开cmd窗口:

  1. react-native run-android

3、源代码分析:

附上index.android.js文件:

  1. /*
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. */
  5.  
  6. import React, { Component } from 'react';
  7. import {
  8. AppRegistry,
  9. StyleSheet,
  10. Text,
  11. View
  12. } from 'react-native';
  13.  
  14. class MyProject extends Component {
  15. render() {
  16. return (
  17. <View style={styles.container}>
  18. <Text style={styles.welcome}>
  19. Welcome to React Native!
  20. </Text>
  21. <Text style={styles.instructions}>
  22. To get started, edit index.android.js
  23. </Text>
  24. <Text style={styles.instructions}>
  25. Shake or press menu button for dev menu!This is enable hot!
  26. </Text>
  27. </View>
  28. );
  29. }
  30. }
  31.  
  32. const styles = StyleSheet.create({
  33. container: {
  34. flex: ,
  35. justifyContent: 'center',
  36. alignItems: 'center',
  37. backgroundColor: '#F5FCFF'
  38. },
  39. welcome: {
  40. fontSize: ,
  41. textAlign: 'center',
  42. margin:
  43. },
  44. instructions: {
  45. textAlign: 'center',
  46. color: '#333333',
  47. marginBottom:
  48. }
  49. });
  50.  
  51. 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. eclipse installer 安装的新版本 eclipse 导入旧版本 eclipse 插件

    打开旧版本eclipse,选择File -> Export... -> Install -> Installed Software Items to File,点击Next 点击Se ...

  2. leetcode 31. Next Permutation JAVA

    题目: 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许使用额外常数 ...

  3. Public Bike Management (30)(DFS,VRCTOR,模拟)(PAT甲级)

    #include<bits/stdc++.h>using namespace std;const int inf = 1e9;int sum,n,tar,m;int num[507];in ...

  4. 本地Windows环境下安装MySql

    Windows 上安装 MySQL Windows 上安装 MySQL 相对来说会较为简单,你需要在 MySQL 下载中下载 Windows 版本的 MySQL 安装包. Download Link: ...

  5. 安装php,nginx 带debug

    gdb安装包   在CentOS6.4下使用gdb进行调试的时候, 使用bt(breaktrace)命令时,会弹出如下的提示: 头一天提示: Missing separate debuginfos, ...

  6. vue.js学习笔记(一)——vue-cli项目的目录结构

    vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组件和vue生态系 ...

  7. Git服务器搭建笔记

    前言:最近公司要使用git服务器对Android4.4的源码进行版本控制,所以花了些时间在Ubuntu14.04上搭建了git服务器,正好前段时间也学习了下git的使用哈哈 ------------- ...

  8. 让windows登陆界面显示administrator账户

    如果windowsXP只有一个administrator账户,在开机登陆windows的欢迎界面,会出现这个账户名,点击,输入密码就可登陆到windows桌面: 如果新建了另一个管理员账户,在欢迎界面 ...

  9. 微信内置浏览器H5 弹出键盘 遮盖文本框解决办法 Fixed失效

    if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", functio ...

  10. Vmtools的安装步骤

    目的:实现win和centos之间的相互复制功能 1.进入centos 2.点击vm菜单的->虚拟机->安装VMware Tools 3.centos会出现一个vm的安装包 4.将文件移动 ...