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 布局
随机推荐
- [SDOI2009] HH的项链 | 莫队模板
题目链接:戳我 题意:求区间中不同颜色的种类数 因为是要过知识点,所以又把这题拿出来做了一遍......这里就写两种方法吧 主席树做法 设pre[i]为第i个点上的颜色在前面序列中出现的最晚的一次的位 ...
- 201621123012 《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题集 ...
- iOS 图片的存储以及读取和删除
将图片存储到本地 NSArray *dirArray = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask ...
- (转)windows下VMware-workstation中安装CentOS
windows下VMware-workstation中安装CentOS windows下VMware-workstation中安装CentOS,可以分两部分,安装虚拟机和安装CentOS虚拟机.具 ...
- P1642 规划 01分数规划+树形DP
$ \color{#0066ff}{ 题目描述 }$ 某地方有N个工厂,有N-1条路连接它们,且它们两两都可达.每个工厂都有一个产量值和一个污染值.现在工厂要进行规划,拆除其中的M个工厂,使得剩下的工 ...
- falsk 请求钩子
请求钩子是通过装饰器的形式实现,Flask支持如下四种请求钩子:before_first_request在处理第一个请求前执行before_request在每次请求前执行如果在某修饰的函数中返回了一个 ...
- HTML-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
- linux入门 配置网络
我因为有自己的ssr,因此想让虚拟机共享我的ssr,并且不想搞的太麻烦,特此记录一下 1. 获取本机的ip 在命令行里输入ipconfig /all 获取本机IP,如下图所示,我本机ip为10.3.7 ...
- 最新 php oracle 数据库连接 数据库分页
php 5连接 oracle 10g php oracle 分页 <?php//buyicode studio 20/12/2009//总记录数$sql = "select ROWNU ...
- 进阶篇:2)DFMA方法的运用
本章目的:DFMA方法运用,引导后面的章节.(运用比只理解重要!) 1.DFMA概述 1.1 DFMA的由来 工艺粗略可分为装配工艺和制造工艺.在这里,我们所讲的“制造”是指产品或部件的某个零件的制造 ...