React Native Elements SearchBar组件无法正常显示阴影问题求助

问题排查&解决方案 #

你当前的写法有两个核心错误：

• 混淆了文本阴影和容器阴影属性：你用的textShadowOffset/textShadowRadius/textShadowColor都是专门作用于文本内容的属性，给容器加阴影完全不会生效
• 阴影加错了容器：你想要的是搜索输入框的阴影效果，而containerStyle控制的是SearchBar最外层的包裹容器，你实际看到的白色输入框是inputContainerStyle控制的，属性加错了层级自然看不到效果

你可以按照下面的方式修改：

1. 把容器阴影相关属性加到inputContainerStyle里，iOS用shadow*系列属性，安卓搭配elevation属性适配
2. 确保对应容器没有设置overflow: hidden，否则阴影会被直接裁剪

修改后的代码示例：

<View style={{ justifyContent: 'center', alignItems: 'center', }}>
  <SearchBar
    placeholder="Search..."
    onChangeText={this.updateSearch}
    value={search}
    round="true"
    containerStyle={styles.searchBarContainer}
    inputContainerStyle={{
      height: scale(45),
      width: scale(200),
      backgroundColor: '#FFFFFF',
      borderRadius: 10,
      // 以下是新增的阴影属性
      shadowColor: '#000',
      shadowOffset: { width: 1, height: 1 },
      shadowOpacity: 0.2,
      shadowRadius: 2,
      elevation: 3, // 安卓端阴影适配
    }}
    searchIcon={() => (
      <MaterialCommunityIcons
        name="glass-mug-variant"
        size={25}
        color="#87909A"
      />
    )}
    clearIcon="null"
  />
</View>

const styles = ScaledSheet.create({
  searchBarContainer: {
    // 这里可以删掉原来的textShadow相关属性了
    backgroundColor: '#d1cfcf',
    borderBottomColor: 'transparent',
    borderTopColor: 'transparent',
    paddingRight: scale(20),
    paddingLeft: scale(20),         
  },
})

如果调整后还是不生效，可以检查下外层父容器是否有设置overflow: hidden，删掉对应属性即可。

内容的提问来源于stack exchange，提问作者Justin Priede