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细节知识点总结<一>的更多相关文章

  1. React Native细节知识点总结<二>

    1.关于React Native导出组件的export default和export的问题: 一个文件只能有一个export default,可以有多个export export class Temp ...

  2. react native 项目使用 expo 二维码扫描失败

    今天学习react native,需使用expo在移动端进行调试. npm start 运行项目后,使用expo扫描二维码,始终没有反应.于是决定采用这个方法: 连上手机打开usb调试后,按下‘a’, ...

  3. React Native细节记录

    1.环境搭建部分 安装完node后建议设置npm镜像以加速后面的过程(或使用***工具).注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别! npm config ...

  4. React Native小知识点记录

    1>查看 RN 的所有历史版本: npm view react-native versions -json 2>查看 RN 的当前版本: npm view react-native ver ...

  5. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

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

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

  7. Expo大作战(二十一)--expo如何分离(detach),分离后可以比react native更有优势,但也失去了expo的部分优势,

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  8. React Native 二维码扫描组件

    学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现po ...

  9. React Native组件(二)View组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...

随机推荐

  1. percona-toolkit主从同步整理(MySQL)

    前言:MYSQL主从同步架构是目前使用最多的数据库架构之一,尤其是负载比较大的网站,因此对于主从同步的管理也就显得非常重要.而数据作为软件的核心部分,对于其有效的管理显得更为重要.随着时间的推移,软件 ...

  2. Python 获取 exe 的 icon 并且保存

    Python 获取 exe 的 icon 并且保存 参考链接:https://mail.python.org/pipermail/python-win32/2009-April/009078.html ...

  3. Zabbix Web 中文字体显示问题

  4. 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 ...

  5. javascript内置对象:Date

    JavaScript内置函数:Date时间<script>    var today=new Date();    weeks=["日","一",& ...

  6. struts2的Action中使用spring的@Transactional注解事务出错

    1.在Struts2使用的是spring管理对象. 使用spring的注解式事务配置, 在action的方法中直接使用事务遇到的问题. public class testAction extends ...

  7. 路由器配置——RIP路由

    一.实验目的:用rip路由实现全网互通 二.拓扑图: 三.具体步骤配置 (1)R1路由器配置 Router>enable  --进入特权模式Router#configure terminal   ...

  8. shell脚本中${...}函数的用法总结

    ${...}在字符串中有非常多的用法: 1.${var} 限定变量. 如果一个变量名A是另一个变量名AB的前部分,那么,如果要在AB相连时,要得到A的值,就必须使用${var}限定. 如果变量名不会产 ...

  9. 记一次 用 ssh 反向代理解决的远程操作效率问题

    公司在异地有一个项目,项目在内网有一个linux 集群开发人员通过 xshell 进行操作,但是开发过程中还需要公司开发人员进行远程操作,原来采用的方案是向日葵,需求能实现但是限于网络环境向日葵实在是 ...

  10. 使用Flask搭建基于unittest的简单用例挑选及执行平台

    在用例组织上,unittest的Test Suite的拥有非常好的灵活性,然而Test Suite一般要提前编制好,添加和组织用例必须使用代码,不方便使用. 本文使用 Flask + unittest ...