React-native的 PickerIOS 组件其实是自带 指示线的，对于有需求的人来说非常的完美，因为被选中项能够很直观地被看到，但是我的项目经理告诉我这是2条 可恶 的指示线，要求我必须把它去掉。╮(￣▽￣)╭
好吧。那我只能开始硬着头皮上了(android使用了外库，无该现象，不在该问题讨论内)。
「 现象 」
其实这个 PickerIOS 组件貌似被苹果官方处理过，因为当我使用2列 picker 并列的时候并没有出现 所谓的指示线。
2列 picker 并排
当我使用3列的时候，就出现了该情况，如果有类似需求的小伙伴不要抓狂，这里会得到你想要的答案。─=≡Σ(((つ•̀ω•́)つ
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() <UIPickerViewDataSource, UIPickerViewDelegate>
@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<NSDictionary *> *)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的时候都要去对应的代码块去加代码。
不知道路在何方，至少拿起键盘的时候，并不讨厌还有点沉醉。加油。
网友评论