目錄
1）通知的用法
//此組件接收廣播
componentDidMount() {
//注冊(cè)通知
this.subscription = DeviceEventEmitter.addListener('refresh',()=>{
this.BUS_100201_REQ();
});
}
componentWillUnmount() {
// 移除通知
this.subscription.remove();
},
//其他組件發(fā)送廣播
//發(fā)送通知刷新banner頁(yè)面
DeviceEventEmitter.emit('refresh');
2）回調(diào)函數(shù)傳入?yún)?shù)以區(qū)分點(diǎn)擊
onPress={this.handlePress} //回調(diào)函數(shù)如何傳入?yún)?shù)以區(qū)分點(diǎn)擊呢？
onPress={this.handlePress(id)} //錯(cuò)誤，這樣會(huì)在聲明時(shí)執(zhí)行！
onPress={()=>this.handlePress(id)} //正確
onPress={this.handlePress.bind(this,id)} //正確
//箭頭函數(shù)或bind都會(huì)生成新函數(shù)。傳入?yún)?shù)以閉包形式“封存”，留待調(diào)用。
3）react-navigation
//跳轉(zhuǎn),注意就算參數(shù)為空，也要傳個(gè)空對(duì)象{}，否則下頁(yè)面獲取時(shí)需判斷this.props.navigation.state.params是否為undefined
this.props.navigation.navigate('Home',{xxx:'1'});
//下個(gè)頁(yè)面獲取參數(shù)
this.props.navigation.state.params.xxx
//跳轉(zhuǎn)后關(guān)閉自己
this.props.navigation.goBack();
this.props.navigation.navigate('Home',{});
4 setState()
- this.setState為異步方法，在setState()后立即打印this.state.xxx可能是錯(cuò)誤數(shù)據(jù)，可使用回調(diào)函數(shù)
// 1-你可以在 render方法里取
// 2-如下
this.setState({
data:xxx
},()=>{
console.log('完成setState后回調(diào)')
});
5 父子組件刷新方式
一個(gè)組件在加載完畢后，如果既沒(méi)有外部驅(qū)動(dòng)，也沒(méi)有內(nèi)部驅(qū)動(dòng)，是不會(huì)進(jìn)行重新渲染的。
組件的數(shù)據(jù)傳遞需要由渲染來(lái)驅(qū)動(dòng)，而不是由數(shù)據(jù)的變化來(lái)驅(qū)動(dòng)的。因此父組件要傳遞數(shù)據(jù)給子組件，第一步是要觸發(fā)父組件對(duì)自身的重新render
組件刷新有兩種方法:
| 方式 | 說(shuō)明 |
|---|---|
| 內(nèi)部驅(qū)動(dòng) | setState() |
| 外部驅(qū)動(dòng) | 父組件通過(guò)給子組件傳遞數(shù)據(jù)（屬性）告知子組件有可能需要重新渲染，子組件自己根據(jù)傳來(lái)的數(shù)據(jù)（在componentWillReceiveProps方法中）決定是否有必要進(jìn)行重新渲染 |
- 子組件刷新父組件
| 方式 | 說(shuō)明 |
|---|---|
| <Son onChangeMsg={(msg)=>{this.onMsgByCallAndMsg(msg)} }/> | 回調(diào)函數(shù) |
| DeviceEventEmitter | 通知 |
- 父組件刷新子組件
<Son msg={'信息'}/> //傳遞常量
<Son msg={this.state.msg}/> //傳遞state
父組件重新render會(huì)觸發(fā)子Component組件的
componentWillReceiveProps->
shouldComponentUpdate->
componentWillUpdate->
render->
componentDidUpdate ->@end
<Son msg={'信息'}/> //傳遞常量
父組件重新render會(huì)觸發(fā)子PureComponent組件的
componentWillReceiveProps-> @end
<Son msg={this.state.msg}/> 傳遞state
父組件重新render會(huì)觸發(fā)子PureComponent組件的
componentWillReceiveProps->
shouldComponentUpdate->
componentWillUpdate->
render->
componentDidUpdate ->@end
6 定時(shí)器
setToggleTimeout(){
this.timer = setTimeout(
()=>{
console.log('延時(shí)器..')
this.setState({animating: !this.state.animating});
this.setToggleTimeout();
},1000
)
}
componentWillUnmount() {
this.timer && clearTimeout(this.timer);
}
7 通過(guò)URL打開(kāi)App某頁(yè)面
- 配置RN路由代碼
//react-navigation路由配置
GK_Home:{
screen:GK_Home,
//注冊(cè)此頁(yè)面的url路由，并配置其參數(shù)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];
}
- 測(cè)試(Webview內(nèi)部，或Safair都可打開(kāi)并獲取參數(shù))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<br/>
<!-- <a href="[scheme]://[host]/[path]?[query]">啟動(dòng)應(yīng)用程序</a> -->
<!-- <a href="jsksy://app.jsksy.cn/test/second?name=tgf">打開(kāi)app</a><br/> -->
<a href="jsksy://app/GK_Home/tgf/16">tgftgf</a><br/>
</html>
8 SVG的使用
RN不支持svg，需要依賴庫(kù)react-native-svg
使用 msvgc將svg轉(zhuǎn)換為js組件
-
生成的文件如下：
注意：要將內(nèi)部生成的xlink:href修改為href，否則rn運(yùn)行會(huì)報(bào)錯(cuò)！
屏幕快照 2018-03-02 下午5.05.21.png
import Test from '../../svg/Test';
render(){
return(
...
<Test width={200} height={200}/>
...
)
}
...
注意：目前這種方式如果svg圖像有陰影或漸變，是無(wú)法支持的，純色圖像是可以的
非純色圖像會(huì)展示出這種效果
