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. 如何给mysql数据库添加一个用户

    首先以root身份登录到MySQL服务器中. $ mysql -u root -p 当验证提示出现的时候,输入MySQL的root帐号的密码. 创建一个MySQL用户 使用如下命令创建一个用户名和密码 ...

  2. ak-2

    1.人大金仓数据 jdbc 安装完成之后有个jdbc的文件夹  里边就是 jdbc包,相应的window前端工具有jdbc示例,因为太多没看全呢,有一个“”模式“”的概念  jdbc连接时如果要指定模 ...

  3. 嵌入式系统FreeRTOS — 互斥信号量

    互斥信号量可以在资源保护的时候很有帮助.用于控制在两个或多个任务间访问共享资源.任务1里面用互斥,那么任务2只能等任务1访问完再访问同一个变量. 比如全局变量double gADC_value[CH_ ...

  4. mysql慢查询配置(5.7)

    刚装了Windows版mysql,想开启慢查询日志. 修改D:\mysql-5.7.23-winx64下my.ini配置文件,添加: [mysqld]slow_query_log = onslow_q ...

  5. Codeforces Round #454 Div. 1 [ 906A A. Shockers ] [ 906B B. Seating of Students ] [ 906C C. Party ]

    PROBLEM A. Shockers 题 http://codeforces.com/contest/906/problem/A 906A 907C 解 水题,按照题意模拟一下就行了 如果是 ‘ ! ...

  6. JavaScript变量、作用域和内存问题总结

    ㈠理解基本类型和引用类型的值  ⑴JavaScript变量可以用来保存两种类型的值:基本类型值和引用类型值. ⑵基本类型的值源自以下 5 种基本数据类型:Undefined.Null.Boolean. ...

  7. PHP mysqli_fetch_object() 函数

    定义和用法 mysqli_fetch_object() 函数从结果集中取得当前行,并作为对象返回. 注释:该函数返回的字段名是区分大小写的. <?php // 假定数据库用户名:root,密码: ...

  8. mobx是什么?有什么优点?

    mobx是一个简单可扩展的状态管理库. mobx vs redux mobx是学习成本更低,性能更好的状态解决方案. mobx开发难度低: mobx代码量少: mobx渲染性能好: mobx参考

  9. ARM编辑、编译工具

    手动编译 编译器问题,肯定是GNU的大名鼎鼎的GCC了,与此相关的什么连接器,汇编器也都包含在内了. 针对arm的GCC,当然就是arm-linux-gcc了,我所用的版本就是友善之臂光盘自带arm- ...

  10. node中fs内置模块

    Node.js内置的fs模块就是文件系统模块,负责读写文件. 和所有其它JavaScript模块不同的是,fs模块同时提供了异步和同步的方法. 回顾一下什么是异步方法.因为JavaScript的单线程 ...