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: ,
- 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的更多相关文章
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- react native基础与入门
react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- React Native 学习资料
React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/
- react native 或 flutter 开发app
react-native react native和原生Android/ios: https://www.oschina.net/news/97466/should-we-use-react-nati ...
- React Native 学习(三)之 FlexBox 布局
React Native 学习(三)之 FlexBox 布局
随机推荐
- eclipse installer 安装的新版本 eclipse 导入旧版本 eclipse 插件
打开旧版本eclipse,选择File -> Export... -> Install -> Installed Software Items to File,点击Next 点击Se ...
- leetcode 31. Next Permutation JAVA
题目: 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许使用额外常数 ...
- 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 ...
- 本地Windows环境下安装MySql
Windows 上安装 MySQL Windows 上安装 MySQL 相对来说会较为简单,你需要在 MySQL 下载中下载 Windows 版本的 MySQL 安装包. Download Link: ...
- 安装php,nginx 带debug
gdb安装包 在CentOS6.4下使用gdb进行调试的时候, 使用bt(breaktrace)命令时,会弹出如下的提示: 头一天提示: Missing separate debuginfos, ...
- vue.js学习笔记(一)——vue-cli项目的目录结构
vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组件和vue生态系 ...
- Git服务器搭建笔记
前言:最近公司要使用git服务器对Android4.4的源码进行版本控制,所以花了些时间在Ubuntu14.04上搭建了git服务器,正好前段时间也学习了下git的使用哈哈 ------------- ...
- 让windows登陆界面显示administrator账户
如果windowsXP只有一个administrator账户,在开机登陆windows的欢迎界面,会出现这个账户名,点击,输入密码就可登陆到windows桌面: 如果新建了另一个管理员账户,在欢迎界面 ...
- 微信内置浏览器H5 弹出键盘 遮盖文本框解决办法 Fixed失效
if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", functio ...
- Vmtools的安装步骤
目的:实现win和centos之间的相互复制功能 1.进入centos 2.点击vm菜单的->虚拟机->安装VMware Tools 3.centos会出现一个vm的安装包 4.将文件移动 ...