RN项目实战中常见问题
2020-07-22 本文已影响0人
星星编程
目录
一、前言
二、获取状态栏的高度
三、集成个推
四、 底部导航图标上添加徽章(未读消息个数)
五、ReactNavigation Tab切换页面并传递参数
六、Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template
一、 前言
每天都期待着能够与bug小姐姐不期而遇,了解她的一切,最终消失在爱河里。
每天对新技术小姐姐寻寻觅觅,她的每次出现都让很多人内心荡漾,顿时掀起一片热潮。
无论是bug小姐姐还是新技术小姐姐,最终都逃不过程序员那双如猎鹰般直勾勾的眼睛。
bug小姐姐是程序员持续战斗下去的源泉。
新技术小姐姐是程序员快速提升战斗力的宝藏。
项目小姐姐是程序员用爱堆砌的魔幻城堡。
也许这就是程序员对编程的热爱吧!
哈哈,有人吃醋了,再爱编程和电脑过去吧!
二、 获取状态栏的高度
const { StatusBarManager } = NativeModules;
getStatusBarHeight = () => {
if (Platform.OS == 'ios') {
StatusBarManager.getHeight(statusBarHeight => {
if (statusBarHeight.height <= 0) {
this.getStatusBarHeight();
return;
}
this.setState({
statusBarHeight: statusBarHeight.height
})
});
} else {
const statusBarHeight = StatusBar.currentHeight;
this.setState({
statusBarHeight: statusBarHeight
})
}
}
三、 集成个推
iOS端接收到远程推送,回调RN接到消息后业务逻辑。
RCT_EXPORT_MODULE();
- (NSArray<NSString *> *)supportedEvents{
return @[@"onReceiveRemoteNotification"];
}
RCT_EXPORT_METHOD(receiveRemote){
__weak typeof(self) weakSelf=self;
[self setOnJumpRn:^(NSArray *response) {
[weakSelf sendEventWithName:@"onReceiveRemoteNotification" body:response[0]];
}];
}
安卓端接收到远程推送,回调RN接到消息后业务逻辑。
this.mContext.getJSModule(
DeviceEventManagerModule.RCTDeviceEventEmitter.class
).emit("onReceiveRemoteNotification",receiveMap);
RN处理页面逻辑。
const Native = new NativeEventEmitter(YFRNBridge);
YFRNBridge. receiveRemote();
Native.addListener('onReceiveRemoteNotification',(data) => {
var payloadMsg=JSON.parse(data.userinfo.payloadMsg) ;
if (payloadMsg.type == 'event') {
if (payloadMsg.value.type == 1) {
this.props.navigation.navigate('EventSelfDetail', { eventId: payloadMsg.value.id, index: 0 })
} else {
this.props.navigation.navigate('EventDetail', { eventId: payloadMsg.value.id, index: 0 })
}
} else if (payloadMsg.type == 'task') {
this.props.navigation.navigate('TaskDetail', { taskId: payloadMsg.value.id, index: 0 })
}
});
四、 底部导航图标上添加徽章(未读消息个数)
badgeCount不能使用state更新消息个数,不然整个底部导航会重新渲染,使用 React Context, Redux, MobX or event emitters。
function IconWithBadge(badgeCount,icon) {
return (
<View style={{ width: 26, height: 26, margin: 5 }}>
<Image source={icon} style={{ width: 26, height: 26 }} />
{badgeCount > 0 && (
<View
style={{
position: 'absolute',
right: -6,
top: -3,
backgroundColor: 'red',
borderRadius: 6,
width: 12,
height: 12,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' ,textAlign:'center'}}>
{badgeCount}
</Text>
</View>
)}
</View>
);
}
五、ReactNavigation Tab切换页面并传递参数
由Home导航跳转到Event导航的EventView页面,传递参数isToday。
const jumpToAction = TabActions.jumpTo('Event',
{ screen:'EventView',params:{isToday: true}}
);
this.props.navigation.dispatch(jumpToAction);
六、Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
初始化.png pod install.png解决版本:用XCode打开初始化的项目,XCode ——> preferences ——>Locations选择一个Xcode版本,然后重新执行pod install,就能成功下载ReactNative的依赖了。
Locations.png 关注公众号,查看更多内容.jpg