RN项目实战中常见问题

目录
一、前言
二、获取状态栏的高度
三、集成个推
四、底部导航图标上添加徽章（未读消息个数）
五、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

最后编辑于：2020.07.22 21:06:14

RN项目实战中常见问题

一、 前言

二、 获取状态栏的高度

三、 集成个推

四、 底部导航图标上添加徽章（未读消息个数）