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 <= 0) { views.push(// 设置key消除警告 <View key={'1'}> </View> ); } else { views.push( <View style={styles.container} key={'1'}> <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={1} dataSource={dataSource} renderRow={this.renderItem} style={styles.listView} onEndReached={() => this.onEndReached(typeId)} onEndReachedThreshold={10} 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={60} keyExtractor={(item,index)=>item.key=index}/> <Toast ref="toast" position='top'/> </View> ); }
10.循环遍历数组方式:
this.state.typeIds.map((typeId) => { // 数据处理 });
for (var i = 0; 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:30
}
});
//使文本输入框变为不可编辑
}
}
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这个子组件.
