目录
1）通知的用法
//此组件接收广播
componentDidMount() {
//注册通知
this.subscription = DeviceEventEmitter.addListener('refresh',()=>{
this.BUS_100201_REQ();
});
}
componentWillUnmount() {
// 移除通知
this.subscription.remove();
},
//其他组件发送广播
//发送通知刷新banner页面
DeviceEventEmitter.emit('refresh');
2）回调函数传入参数以区分点击
onPress={this.handlePress} //回调函数如何传入参数以区分点击呢？
onPress={this.handlePress(id)} //错误，这样会在声明时执行！
onPress={()=>this.handlePress(id)} //正确
onPress={this.handlePress.bind(this,id)} //正确
//箭头函数或bind都会生成新函数。传入参数以闭包形式“封存”，留待调用。
3）react-navigation
//跳转,注意就算参数为空，也要传个空对象{}，否则下页面获取时需判断this.props.navigation.state.params是否为undefined
this.props.navigation.navigate('Home',{xxx:'1'});
//下个页面获取参数
this.props.navigation.state.params.xxx
//跳转后关闭自己
this.props.navigation.goBack();
this.props.navigation.navigate('Home',{});
4 setState()
- this.setState为异步方法，在setState()后立即打印this.state.xxx可能是错误数据，可使用回调函数
// 1-你可以在 render方法里取
// 2-如下
this.setState({
data:xxx
},()=>{
console.log('完成setState后回调')
});
5 父子组件刷新方式
一个组件在加载完毕后，如果既没有外部驱动，也没有内部驱动，是不会进行重新渲染的。
组件的数据传递需要由渲染来驱动，而不是由数据的变化来驱动的。因此父组件要传递数据给子组件，第一步是要触发父组件对自身的重新render
组件刷新有两种方法:
| 方式 | 说明 |
|---|---|
| 内部驱动 | setState() |
| 外部驱动 | 父组件通过给子组件传递数据（属性）告知子组件有可能需要重新渲染，子组件自己根据传来的数据（在componentWillReceiveProps方法中）决定是否有必要进行重新渲染 |
生命周期
- 子组件刷新父组件
| 方式 | 说明 |
|---|---|
| <Son onChangeMsg={(msg)=>{this.onMsgByCallAndMsg(msg)} }/> | 回调函数 |
| DeviceEventEmitter | 通知 |
- 父组件刷新子组件
<Son msg={'信息'}/> //传递常量
<Son msg={this.state.msg}/> //传递state
父组件重新render会触发子Component组件的
componentWillReceiveProps->
shouldComponentUpdate->
componentWillUpdate->
render->
componentDidUpdate ->@end
<Son msg={'信息'}/> //传递常量
父组件重新render会触发子PureComponent组件的
componentWillReceiveProps-> @end
<Son msg={this.state.msg}/> 传递state
父组件重新render会触发子PureComponent组件的
componentWillReceiveProps->
shouldComponentUpdate->
componentWillUpdate->
render->
componentDidUpdate ->@end
6 定时器
setToggleTimeout(){
this.timer = setTimeout(
()=>{
console.log('延时器..')
this.setState({animating: !this.state.animating});
this.setToggleTimeout();
},1000
)
}
componentWillUnmount() {
this.timer && clearTimeout(this.timer);
}
7 通过URL打开App某页面
- 配置RN路由代码
//react-navigation路由配置
GK_Home:{
screen:GK_Home,
//注册此页面的url路由，并配置其参数name和age
path:'app/GK_Home/:name/:age'
},
-
配置iOS-schemes
配置schemes
- 在~/AppDelegate.m中插入代码
#import <React/RCTLinkingManager.h>
...
//- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
// sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
// return [RCTLinkingManager application:application openURL:url
// sourceApplication:sourceApplication annotation:annotation];
//}
-(BOOL)application:(UIApplication*)app openURL:(NSURL*)url options:(NSDictionary<NSString*,id>*)options{
return [RCTLinkingManager application:app openURL:url
sourceApplication:nil annotation:nil];
}
- 测试(Webview内部，或Safair都可打开并获取参数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<br/>
<!-- <a href="[scheme]://[host]/[path]?[query]">启动应用程序</a> -->
<!-- <a href="jsksy://app.jsksy.cn/test/second?name=tgf">打开app</a><br/> -->
<a href="jsksy://app/GK_Home/tgf/16">tgftgf</a><br/>
</html>
演示
8 SVG的使用
RN不支持svg，需要依赖库react-native-svg
使用 msvgc将svg转换为js组件
msvgc
-
生成的文件如下：
注意：要将内部生成的xlink:href修改为href，否则rn运行会报错！
屏幕快照 2018-03-02 下午5.05.21.png
import Test from '../../svg/Test';
render(){
return(
...
<Test width={200} height={200}/>
...
)
}
...
结果
注意：目前这种方式如果svg图像有阴影或渐变，是无法支持的，纯色图像是可以的
非纯色图像会展示出这种效果
网友评论