取消ReactNative组件PickerIOS上下两条灰色的指示线

React-native的 PickerIOS 组件其实是自带 指示线的,对于有需求的人来说非常的完美,因为被选中项能够很直观地被看到,但是我的项目经理告诉我这是2条 可恶 的指示线,要求我必须把它去掉。╮( ̄▽ ̄)╭

好吧。那我只能开始硬着头皮上了(android使用了外库,无该现象,不在该问题讨论内)。

「 现象 」

其实这个 PickerIOS 组件貌似被苹果官方处理过,因为当我使用2列 picker 并列的时候并没有出现 所谓的指示线。

取消ReactNative组件PickerIOS上下两条灰色的指示线_第1张图片
2列 picker 并排

当我使用3列的时候,就出现了该情况,如果有类似需求的小伙伴不要抓狂,这里会得到你想要的答案。─=≡Σ(((つ•̀ω•́)つ

取消ReactNative组件PickerIOS上下两条灰色的指示线_第2张图片
3列 picker 并排

「 探索 」

我翻看了 PickerIOS 的封装,RN官方并没有做额外的处理,所以可以断定RN层并不影响指示线的显示,应该是原生层的问题。

由于我并不精通于IOS开发,所以走上了 baidu 如何取消 UIPickerView的指示线之路。( ̄. ̄)

参考资料 --> 如何去掉UIPickerView及UIDatePickerView中的分割线

然后根据该作者的分析,只需要在RCTPicker.m中添加一个 didMoveToWindow 生命周期,并在该方法内去掉指示线就完美解决!!!

// 在 RCTPicker.m 中加入如下代码
- (void)didMoveToWindow{
    [self.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        
        if (obj.frame.size.height < 1)
        {
            [obj setBackgroundColor:[UIColor clearColor]];
        }
    }];
}

「 整体代码 」

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "RCTPicker.h"

#import "RCTConvert.h"
#import "RCTUtils.h"

@interface RCTPicker() 
@end

@implementation RCTPicker

- (instancetype)initWithFrame:(CGRect)frame
{...}

RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)

//- (void)didMoveToWindow{
//    [self.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
//        
//        if (obj.frame.size.height < 1)
//        {
//            [obj setBackgroundColor:[UIColor clearColor]];
//        }
//    }];
//}

- (void)setItems:(NSArray *)items
{ ...}

- (void)setSelectedIndex:(NSInteger)selectedIndex
{...}

#pragma mark - UIPickerViewDataSource protocol

- (NSInteger)numberOfComponentsInPickerView:(__unused UIPickerView *)pickerView
{return 1;}

- (NSInteger)pickerView:(__unused UIPickerView *)pickerView
numberOfRowsInComponent:(__unused NSInteger)component
{return _items.count;}

#pragma mark - UIPickerViewDelegate methods

- (NSString *)pickerView:(__unused UIPickerView *)pickerView
             titleForRow:(NSInteger)row
            forComponent:(__unused NSInteger)component
{return [RCTConvert NSString:_items[row][@"label"]];}

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component {
  return _font.pointSize + 19;
}

- (UIView *)pickerView:(UIPickerView *)pickerView
            viewForRow:(NSInteger)row
          forComponent:(NSInteger)component
           reusingView:(UILabel *)label
{...}

- (void)pickerView:(__unused UIPickerView *)pickerView
      didSelectRow:(NSInteger)row inComponent:(__unused NSInteger)component
{...}

@end

对于RN开发的同学可以打个 patch,然后写个对应的sh脚本,这样就不需要每次 yarn install的时候都要去对应的代码块去加代码。

不知道路在何方,至少拿起键盘的时候,并不讨厌还有点沉醉。加油。

你可能感兴趣的:(取消ReactNative组件PickerIOS上下两条灰色的指示线)