react-native - 在 iOS 上的 react-native-material-dropdown 中编辑下划线颜色而不更改箭头和标签颜色

Question

我将 react-native-material-dropdown 用于我也使用 RN TextInput 的表单，因此我希望两者之间具有一致的外观。

我想要一个黑色标签标题和一个浅灰色下划线

对于我使用的 Android underlineColorAndroid={'transparent'}，效果很好。问题出在 iOS 上，如果我更改 baseColor 属性，它会自动更改下拉箭头、下划线和标签。如何分别设置标签和下划线的颜色？

    import { Dropdown } from 'react-native-material-dropdown'
    //...

    <Dropdown
       underlineColorAndroid="transparent"
       label={'BILLING TYPE'}
       labelFontSize={12}
       labelTextStyle={styles.dropdownLabel}
       itemTextStyle={styles.dropdownItem}
       style={styles.dropdownMainText}                         
       style = {{color: Colors.black}}
       baseColor={Colors.black}
       value={'Paper'}
       data={billingTypes}
       onChangeText={value => this.onEditField(value)}
    />

如果我设置 baseColor={Colors.black} （我想要），下划线变成黑色而不是灰色（我不想要）。

如果我设置 baseColor={Colors.rose}，所有 3 个元素都会改变颜色：标签、箭头和下划线。

这是我的 styles.js 文件，没有什么特别的事情发生

export default StyleSheet.create({
//...
  dropdownLabel: {
    textTransform: 'uppercase',
    color: Colors.black,
  },
  dropdownItem: {
    fontSize: Fonts.size.tiny,
    color: Colors.black,
  },
  dropdownMainText: {
  },
});

const colors = {
  black: '#252525',
  rose: '#e6968f', 
};

标签： react-nativereact-native-ios

Answer 1

您要在 Dropdown 对象中更改的颜色当前正在函数中运行。您不能单独设置它，因为您没有为下划线指定单独的颜色。

/dropdown/index.js

renderRipple() {
    let {
      baseColor,
      rippleColor = baseColor,
      rippleOpacity,
      rippleDuration,
      rippleCentered,
      rippleSequential,
    } = this.props;

    let { bottom, ...insets } = this.rippleInsets();
    let style = {
      ...insets,

      height: this.itemSize() - bottom,
      position: 'absolute',
    };

    return (
      <Ripple
        style={style}
        rippleColor={rippleColor}
        rippleDuration={rippleDuration}
        rippleOpacity={rippleOpacity}
        rippleCentered={rippleCentered}
        rippleSequential={rippleSequential}
        ref={this.updateRippleRef}
      />
    );
  }