React Native细节知识点总结<一>
1.propTypes:
static propTypes = {
name:PropTypes.string,
ID:PropTypes.number.isRequired,
}
'isRequired' 表示如果不传递这个属性,那么开发阶段中,系统会出现警告,让我们对其进行属性确认,也就是说是否为必须属性。
1>属性为任何类型:
React.PropTypes.any
2>属性是否是 JavaScript 基本类型:
React.PropTypes.array;
React.PropTypes.func;
React.PropTypes.bool;
React.PropTypes.number;
React.PropTypes.object;
React.PropTypes.string;
React.PropTypes.style;
3>属性是某个 React 元素:
React.PropTypes.element;
4>属性为几个特定的值:
React.PropTypes.oneOf(['value1', 'value2'])
5>属性为指定类型中的一个:
React.PropTypes.oneOfType([
React.PropTypes.node,
React.PropTypes.number,
React.PropTypes.string
])
6>属性为可渲染的节点:
React.PropTypes.node;
7>属性为某个指定类的实例:
React.PropTypes.instanceOf(NameOfClass);
8>属性为指定类型的数组:
React.PropTypes.arrayOf(React.PropTypes.string)
9>属性有一个指定的成员对象:
React.PropTypes..objectOf(React.PropTypes.number)
10>属性是一个指定构成方式的对象:
React.PropTypes.shape({
color:React.PropTypes.stirng,
fontSize:React.PropTypes.number
})
2.属性默认值(当我们没有传递属性的时候使用):
static defaultProps = {
name:'思思'
};
3.react-native-pull使用网络请求:
// 网络请求
fetchData(resolve) {
setTimeout(() => {
fetch('http://guangdiu.com/api/gethots.php')
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.data),
loaded:true,
});
if (resolve !== undefined){
setTimeout(() => {
resolve(); // 关闭动画
}, 1000);
}
})
.done();
});
}
4.DeviceEventEmitter的使用:
注意: 不管是在发送还是接收页面都需要引入DeviceEventEmitter.
// 导入
import {DeviceEventEmitter} from 'react-native'; // 接收通知
componentDidMount(){
this.listener = RCTDeviceEventEmitter.addListener('通知名称',(value)=>{
// 接受到通知后的处理
});
} componentWillUnmount(){
// 移除 一定要写
this.listener.remove();
} // 发通知
RCTDeviceEventEmitter.emit('通知名称',value);
5.处理根据服务器返回数据处理显示视图:
注意push需要给子视图设置Key值...
render() {
var views = [];
if (this.props.fileListData.length <= ) {
views.push(// 设置key消除警告
<View key={''}>
</View>
);
} else {
views.push(
<View style={styles.container} key={''}>
<Text style={styles.textTipStyle}>
附件列表:
</Text>
<View style = {styles.fileListContainerStyle}>
{this.renderFileListView()}
</View>
</View>
);
}
return (
<View>
{views}
</View>
);
}
6.设置背景透明:
backgroundColor:'transparent',或者backgroundColor:'rgba(0,0,0,0)',
7.取得文件扩展名:
// 判断后缀名
var fileName = rowData.name;
console.log(fileName);
var index1 = fileName.lastIndexOf(".");
var index2 = fileName.length;
var suffixStr = fileName.substring(index1,index2);//后缀名
console.log(suffixStr);
8.ListView使用:
return (
<ListView
initialListSize={}
dataSource={dataSource}
renderRow={this.renderItem}
style={styles.listView}
onEndReached={() => this.onEndReached(typeId)}
onEndReachedThreshold={}
renderFooter={this.renderFooter}
refreshControl={
<RefreshControl
style={styles.refreshControlBase}
refreshing={read.isRefreshing}
onRefresh={() => this.onRefresh(typeId)}
title="Loading..."
colors={['#ffaa66cc', '#ff00ddff', '#ffffbb33', '#ffff4444']}
/>
}
/>
9.FlatList使用:
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
renderData() {
return (
<View style={styles.container}>
<AnimatedFlatList
style={{backgroundColor: 'white'}}
data={this.state.dataArray}
renderItem={this.renderItemView.bind(this)}
onEndReached={this.loadMoreData.bind(this)}
onRefresh={this.onRefresh.bind(this)}
refreshing={this.state.refreshing}
ListFooterComponent={this.renderFooter.bind(this)}
onEndReachedThreshold={}
keyExtractor={(item,index)=>item.key=index}/>
<Toast ref="toast" position='top'/>
</View>
);
}
10.循环遍历数组方式:
this.state.typeIds.map((typeId) => {
// 数据处理
});
for (var i = ; i < this.props.fileListData.length; i++) {
// 数据处理
}
// for in 注意index是下标,不是元素
for (var index in data.orgUsersBeanList) {
// 数据处理
}
// for of value是元素值
for (var value of data.orgUsersBeanList) { }
11.监听Android的返回按钮点击:
componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
this.getUserInfo();
} componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
} onBackAndroid = () => {
BackHandler.exitApp();
return true;
}
12.ref的使用:
ref 接受值为string类型的参数或者一个函数function.
<WebView
ref={(ref) => {
this.webview = ref;
}}
/>
只有在组件的render方法被调用时,ref才会被调用,组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用,那么你得到的是undefined。
心得:ref属性在开发中使用频率很高,使用它你可以获取到任何你想要获取的组件的对象,有个这个对象你就可以灵活地做很多事情,比如:读写对象的变量,甚至调用对象的函数。
13.让组件做到局部刷新setNativeProps :
不使用state或是props。
setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ,则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。
buttonPressed() { //当按钮按下的时候执行此函数
let textInputValue = 'yuanmenglong'; this.setState({textInputValue}); //修改文本输入框的属性值
this.refs.textInputRefer.setNativeProps({
editable:false
}); this.refs.text2.setNativeProps({
style:{
color:'blue',
fontSize:
}
});
//使文本输入框变为不可编辑
}
}
render(
<View style={styles.container}>
<Text style={styles.buttonStyle} onPress={this.buttonPressed}>
按我
</Text>
<Text style={styles.textPromptStyle} ref="text2">
文字提示
</Text>
<View>
<TextInput style={styles.textInputStyle}
ref="textInputRefer"
value={this.state.textInputValue}
onChangeText={(textInputValue)=>this.setState({textInputValue})}
/>
</View>
);
14....this.props:
render() {
return <Category {...this.props} />;
}
获取来自父组件的属性,再传递给Category这个子组件.
React Native细节知识点总结<一>的更多相关文章
- React Native细节知识点总结<二>
1.关于React Native导出组件的export default和export的问题: 一个文件只能有一个export default,可以有多个export export class Temp ...
- react native 项目使用 expo 二维码扫描失败
今天学习react native,需使用expo在移动端进行调试. npm start 运行项目后,使用expo扫描二维码,始终没有反应.于是决定采用这个方法: 连上手机打开usb调试后,按下‘a’, ...
- React Native细节记录
1.环境搭建部分 安装完node后建议设置npm镜像以加速后面的过程(或使用***工具).注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别! npm config ...
- React Native小知识点记录
1>查看 RN 的所有历史版本: npm view react-native versions -json 2>查看 RN 的当前版本: npm view react-native ver ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- Expo大作战(二十一)--expo如何分离(detach),分离后可以比react native更有优势,但也失去了expo的部分优势,
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- React Native 二维码扫描组件
学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现po ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
随机推荐
- Codeforces 1187 G - Gang Up
G - Gang Up 思路: 每个点按时间拆点建边,然后跑最小费用流 一次走的人不能太多,假设每次走的人为k (k*k-(k-1)*(k-1))*d <= c+d k <= 24 代码: ...
- 【CEOI1999】Sightseeing trip
Description https://loj.ac/problem/10072 Solution 现在我连普及组题都不会了?(bushi) 懒得讲了,看这吧.
- jenkins 配置主从机制(master-slaver)
1. 中文:系统管理——节点管理——新建节点(左上侧) 英文:Manage Jenkins——Manage Node——新建节点(左上侧) 2. 中文配图 英文配图: 3. 远程工作目录 以mac为例 ...
- ThreadPoolExecutor源码分析二
接上文,这里继续分析源码 private static final int COUNT_BITS = Integer.SIZE - 3; private static final int CAPA ...
- C语言之const
鱼鹰 鱼鹰谈单片机 2月19日 预计阅读时间: 5 分钟 我们知道,数据分为两种,一种为只读,一种为可读可写,为了防止一些不变的数据被程序意外的修改,有必要对它进行保护.这就是 const 的作用. ...
- 从mysql8.0读取数据并形成pandas dataframe类型数据,精确定位行列式中的元素,并读取
from pandas import * import pandas as pd from sqlalchemy import create_engine engine = create_engine ...
- HDU 6060 - RXD and dividing | 2017 Multi-University Training Contest 3
/* HDU 6060 - RXD and dividing [ 分析,图论 ] | 2017 Multi-University Training Contest 3 题意: 给一个 n 个节点的树, ...
- MFC 标签页Tab Control
自带的标签页不好用,因此借助了TabSheet文件TabSheet源码 1.在解决方案资源管理器——项目处鼠标右键——在文件资源管理器中打开文件夹(或者按下图,更方便),把TabSheet.h.Tab ...
- BOOTING ELOQUENT MODEL TRAITS
BOOTING ELOQUENT MODEL TRAITS So I've learnt a little Laravel/Eloquent trick today that is very much ...
- 【线性代数】2-6:三角矩阵( $A=LU$ and $A=LDU$ )
title: [线性代数]2-6:三角矩阵( A=LUA=LUA=LU and A=LDUA=LDUA=LDU ) toc: true categories: Mathematic Linear Al ...