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 详解的更多相关文章

  1. 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  2. 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  3. 《React Native 精解与实战》书籍连载「配置 iOS 与 Android 开发环境」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  4. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  5. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. 《React Native 精解与实战》书籍连载「React Native 底层原理」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  7. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  9. [书籍精读]《React Native精解与实战》精读笔记分享

    写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...

  10. java 关键字final static native详解

    java 关键字native static final详解 一.final 根据程序上下文环境,Java关键字final有"这是无法改变的"或者"终态的"含义, ...

随机推荐

  1. 日志组件Log4Net

    <?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...

  2. 插件 原生js 省市区 三级联动 源码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. usb驱动的基本结构和函数简介【转】

    转自:http://blog.csdn.net/jeffade/article/details/7698404 几个重要的结构 struct--接口 struct usb_interface { /* ...

  4. kvm虚拟机最佳实践系列1-kvm宿主机准备

    KVM宿主机配置 系统环境:ubuntu16, bond0 业务网口 bond1 管理网口+存储网口 安装KVM环境支持 sudo apt-get install qemu-kvm sudo apt- ...

  5. selenium访问百度 然后获取百度logo的截图

    #!/usr/bin/env python # encoding: utf-8 import time from selenium import webdriver from PIL import I ...

  6. mybatis的模糊查询格式

    mybatis的模糊查询格式: <select id="xxx" parameterType="com.model.xxx" resultMap=&quo ...

  7. Appium+python自动化4-元素定位uiautomatorviewer【转载】

    前言 环境搭建好了,下一步元素定位,元素定位本篇主要介绍如何使用uiautomatorviewer,通过定位到页面上的元素,然后进行相应的点击等操作. uiautomatorviewer是androi ...

  8. Python模块学习:glob 文件路径查找

    glob模块是最简单的模块之一,内容非常少. 用它可以查找符合特定规则的文件路径名.跟使用windows下的文件搜索差不多. 查找文件只用到三个匹配符:”*”, “?”, “[]”. ”*”匹配0个或 ...

  9. 洛谷 P3955 图书管理员【模拟/思维】

    题目描述 图书馆中每本书都有一个图书编码,可以用于快速检索图书,这个图书编码是一个 正整数. 每位借书的读者手中有一个需求码,这个需求码也是一个正整数.如果一本书的图 书编码恰好以读者的需求码结尾,那 ...

  10. Extract - <<凤凰牌老熊-现代支付系统设计>>

    本文摘录自: http://blog.lixf.cn/essay/2017/04/01/concept-01-overview/ 一.支付概述-- 1. 支付与交易 交易过程: 交易的存在是支付发生的 ...