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有"这是无法改变的"或者"终态的"含义, ...
随机推荐
- 日志组件Log4Net
<?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...
- 插件 原生js 省市区 三级联动 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- usb驱动的基本结构和函数简介【转】
转自:http://blog.csdn.net/jeffade/article/details/7698404 几个重要的结构 struct--接口 struct usb_interface { /* ...
- kvm虚拟机最佳实践系列1-kvm宿主机准备
KVM宿主机配置 系统环境:ubuntu16, bond0 业务网口 bond1 管理网口+存储网口 安装KVM环境支持 sudo apt-get install qemu-kvm sudo apt- ...
- selenium访问百度 然后获取百度logo的截图
#!/usr/bin/env python # encoding: utf-8 import time from selenium import webdriver from PIL import I ...
- mybatis的模糊查询格式
mybatis的模糊查询格式: <select id="xxx" parameterType="com.model.xxx" resultMap=&quo ...
- Appium+python自动化4-元素定位uiautomatorviewer【转载】
前言 环境搭建好了,下一步元素定位,元素定位本篇主要介绍如何使用uiautomatorviewer,通过定位到页面上的元素,然后进行相应的点击等操作. uiautomatorviewer是androi ...
- Python模块学习:glob 文件路径查找
glob模块是最简单的模块之一,内容非常少. 用它可以查找符合特定规则的文件路径名.跟使用windows下的文件搜索差不多. 查找文件只用到三个匹配符:”*”, “?”, “[]”. ”*”匹配0个或 ...
- 洛谷 P3955 图书管理员【模拟/思维】
题目描述 图书馆中每本书都有一个图书编码,可以用于快速检索图书,这个图书编码是一个 正整数. 每位借书的读者手中有一个需求码,这个需求码也是一个正整数.如果一本书的图 书编码恰好以读者的需求码结尾,那 ...
- Extract - <<凤凰牌老熊-现代支付系统设计>>
本文摘录自: http://blog.lixf.cn/essay/2017/04/01/concept-01-overview/ 一.支付概述-- 1. 支付与交易 交易过程: 交易的存在是支付发生的 ...