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组件是最基本的组件,也是首先要掌握的组件,这一 ...
随机推荐
- percona-toolkit主从同步整理(MySQL)
前言:MYSQL主从同步架构是目前使用最多的数据库架构之一,尤其是负载比较大的网站,因此对于主从同步的管理也就显得非常重要.而数据作为软件的核心部分,对于其有效的管理显得更为重要.随着时间的推移,软件 ...
- Python 获取 exe 的 icon 并且保存
Python 获取 exe 的 icon 并且保存 参考链接:https://mail.python.org/pipermail/python-win32/2009-April/009078.html ...
- Zabbix Web 中文字体显示问题
- Codeforces Round #591 (Div. 2, based on Technocup 2020 Elimination Round 1) D. Sequence Sorting
链接: https://codeforces.com/contest/1241/problem/D 题意: You are given a sequence a1,a2,-,an, consistin ...
- javascript内置对象:Date
JavaScript内置函数:Date时间<script> var today=new Date(); weeks=["日","一",& ...
- struts2的Action中使用spring的@Transactional注解事务出错
1.在Struts2使用的是spring管理对象. 使用spring的注解式事务配置, 在action的方法中直接使用事务遇到的问题. public class testAction extends ...
- 路由器配置——RIP路由
一.实验目的:用rip路由实现全网互通 二.拓扑图: 三.具体步骤配置 (1)R1路由器配置 Router>enable --进入特权模式Router#configure terminal ...
- shell脚本中${...}函数的用法总结
${...}在字符串中有非常多的用法: 1.${var} 限定变量. 如果一个变量名A是另一个变量名AB的前部分,那么,如果要在AB相连时,要得到A的值,就必须使用${var}限定. 如果变量名不会产 ...
- 记一次 用 ssh 反向代理解决的远程操作效率问题
公司在异地有一个项目,项目在内网有一个linux 集群开发人员通过 xshell 进行操作,但是开发过程中还需要公司开发人员进行远程操作,原来采用的方案是向日葵,需求能实现但是限于网络环境向日葵实在是 ...
- 使用Flask搭建基于unittest的简单用例挑选及执行平台
在用例组织上,unittest的Test Suite的拥有非常好的灵活性,然而Test Suite一般要提前编制好,添加和组织用例必须使用代码,不方便使用. 本文使用 Flask + unittest ...