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. Codeforces 1187 G - Gang Up

    G - Gang Up 思路: 每个点按时间拆点建边,然后跑最小费用流 一次走的人不能太多,假设每次走的人为k (k*k-(k-1)*(k-1))*d <= c+d k <= 24 代码: ...

  2. 【CEOI1999】Sightseeing trip

    Description https://loj.ac/problem/10072 Solution 现在我连普及组题都不会了?(bushi) 懒得讲了,看这吧.

  3. jenkins 配置主从机制(master-slaver)

    1. 中文:系统管理——节点管理——新建节点(左上侧) 英文:Manage Jenkins——Manage Node——新建节点(左上侧) 2. 中文配图 英文配图: 3. 远程工作目录 以mac为例 ...

  4. ThreadPoolExecutor源码分析二

      接上文,这里继续分析源码 private static final int COUNT_BITS = Integer.SIZE - 3; private static final int CAPA ...

  5. C语言之const

    鱼鹰  鱼鹰谈单片机 2月19日 预计阅读时间: 5 分钟 我们知道,数据分为两种,一种为只读,一种为可读可写,为了防止一些不变的数据被程序意外的修改,有必要对它进行保护.这就是 const 的作用. ...

  6. 从mysql8.0读取数据并形成pandas dataframe类型数据,精确定位行列式中的元素,并读取

    from pandas import * import pandas as pd from sqlalchemy import create_engine engine = create_engine ...

  7. HDU 6060 - RXD and dividing | 2017 Multi-University Training Contest 3

    /* HDU 6060 - RXD and dividing [ 分析,图论 ] | 2017 Multi-University Training Contest 3 题意: 给一个 n 个节点的树, ...

  8. MFC 标签页Tab Control

    自带的标签页不好用,因此借助了TabSheet文件TabSheet源码 1.在解决方案资源管理器——项目处鼠标右键——在文件资源管理器中打开文件夹(或者按下图,更方便),把TabSheet.h.Tab ...

  9. BOOTING ELOQUENT MODEL TRAITS

    BOOTING ELOQUENT MODEL TRAITS So I've learnt a little Laravel/Eloquent trick today that is very much ...

  10. 【线性代数】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 ...