react-native 详解
1.获取主屏幕尺寸
// 导入类库
var Dimensions = require('Dimensions');
// 样式
const styles = StyleSheet.create({
container: {
backgroundColor:'blue',
height:Dimensions.get('window').height,
width:Dimensions.get('window').width
},
});
2.Image 图片
{/* 设置尺寸的情况下 */}
<Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>
{/* uri是固定写法,后面跟上图片网络URL地址的字符串即可,还有,网络图片必须设置图片的大小,否则无法显示,一般还需要配合填充方式以达到想要的效果 */}
<Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
3.TextInput 文本输入框
4.View 中的触摸属性 onPress
Touchable --> TouchableHighlight(高亮触摸) TouchableOpacity(不透明触摸)
5. // 用于设置一些值固定不变或上下界面值传递
getDefaultProps(){
return{
number1: 1,
number2: 2
}
},
// 用于设置一些可变或者用来刷新界面
getInitialState(){
return{
sum:0
}
},
6.
componentWillMount: 相当于OC中的 ViewWillAppear 方法,在组件简要被加载到视图之前调用,没有太多的功能 render: 它是每个组件必需具备的方法,本质上是个函数,并且返回JSX或者其他组件来构成DOM,和Android的XML布局类似 componentDidMount: 在调用了render方法,组件加载成功并被成功渲染出来之后,所要执行的后续操作,一般都会在这个函数中进行,比如经常要面对的网络请求等加载数据操作 componentWillReceiveProps: 指父元素对组件的props或state进行了修改 shouldComponentUpadate: 一般用于优化,可以返回false或true来控制是否进行渲染 componentWillUpdate: 组件刷新前调用,类似componentWillMount componentDidUpdate: 更新后的hook
7.{/* 实例化ScrollView */}
<ScrollView
style={styles.scrollViewStyle}
horizontal={true} // 水平方向
showsHorizontalScrollIndicator={false} // 隐藏水平指示器
showsVerticalScrollIndicator={false} // 隐藏垂直指示器
pagingEnabled={true} // 开启分页功能
>
{/* 实例化内部子视图 */}
{this.renderItem()}
</ScrollView>
8.ListView组件
步骤一:创建一个ListView.DataSource数据源,然后给它传递一个普通的数组数据
getInitialState(){
// 初始化数据源(rowHasChanged是优化的一种手段,只有当r1 !== r2的时候才会重新渲染)
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return{
// 给dataSource传递一组 数组
dataSource: ds.cloneWithRows(['内容0', '内容1', '内容2', '内容3', '内容4', '内容5'])
}
},
步骤二:使用数据源实例化一个ListView组件,定义一个renderRow回调函数,这个函数会接受数组中的每个数据作为参数,并返回一个可渲染的组件(也就是该列表的每一行Item)
render() {
return (
<View style={styles.container}>
// 根据数据源实例化一个ListView
<ListView
style={{backgroundColor:'yellow'}}
// 获取数据源
dataSource={this.state.dataSource}
// 根据数据源创建一个Item
// 注:这里的this.renderRow是隐式写法,系统会根据函数的需要,将对应的参数传递过去(共有4个参数:rowData, sectionID, rowID, highlightRow)
renderRow={this.renderRow}
/>
</View>
);
},
// 返回一个Item
renderRow(rowData,sectionID,rowID) {
return(
// 实例化Item
<View>
<Text style={{backgroundColor:'red', height:44}}>内容{rowData},在第{sectionID}组第{rowID}行</Text>
</View>
)
}
9.NavigatorIOS
10.Navigator 属性
11.View
12.Text
13.fetch
fetch(url, init)
.then((response) => { // 数据解析方式 })
.then((responseData) => { // 获取到的数据处理 })
.catch((error) => { // 错误处理 })
.done();
.
react-native 详解的更多相关文章
- 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「配置 iOS 与 Android 开发环境」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React Native 底层原理」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- [书籍精读]《React Native精解与实战》精读笔记分享
写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...
- java 关键字final static native详解
java 关键字native static final详解 一.final 根据程序上下文环境,Java关键字final有"这是无法改变的"或者"终态的"含义, ...
随机推荐
- 斗地主(NOIP2015)
原题传送门 神奇的题目.. 一开始我准备打暴力直接搜答案. 然后发现.. 无限TLE.. 因为O((logN)^14*T)BOOM.. 然后Zxyer告诉可以只DFS顺子...其他的可以一步搞出来.. ...
- c++ 操作防火墙
原文转自 https://msdn.microsoft.com/zh-cn/library/aa364726(v=vs.85).aspx #include <windows.h> #inc ...
- fatal error LNK1104: 无法打开文件“LIBC.lib”错误(转)
原文转自 http://blog.csdn.net/qq1028850792/article/details/41546043 方法一: 用VS2005重新编译某个工程的发生了链接错误,现在把这个解决 ...
- CentOS下SVN使用
1. 介绍 这里想在CentOS上搭建的是基于http访问的SVN Server 2. 软件 安装相关软件 yum install httpd httpd-devel mod_dav_svn subv ...
- [Oracle] Transporting Tablespace
Transporting Tablespace Between Database [测试目的] 利用Oracle TTS(transport tablespace)特性实现表空间合并 [主要步骤] 确 ...
- javascript验证前端页面
数据表结构 1.html页面 <!DOCTYPE html> <html> <head> <title>注册</title> <met ...
- 鸭子-策略模式(Strategy)
前言 万事开头难,最近对这句话体会深刻!这篇文章是这个系列正式开始介绍设计模式的第一篇,所以肩负着确定这个系列风格的历史重任,它在我脑袋里默默地酝酿了好多天,却只搜刮出了一点儿不太清晰的轮廓,可是时间 ...
- 常用Mysql查询语句
1.查询数据表中重复记录 select user_name,count(*) as count from user_table group by user_name having count>1 ...
- [thinkphp] MD!! 数组构造的好好的,硬是有一个值无法写入数据库
我都要抓狂了,buildsql()方法又用不了,最后决定看runtime里面的文件.先删掉所有的runtime,然后提交一次,就可以在runtime里面看到对应解析后的文件,这样应该可以知道问题在哪. ...
- King of Karaoke
King of Karaoke Time Limit: 1 Second Memory Limit: 65536 KB It's Karaoke time! DreamGrid is performi ...