React Native Web中View组件在Edge浏览器出现异常内边距问题求助

根因说明 #

该问题是React Native Web在Blink内核浏览器（Edge、Chrome）中渲染Pressable组件时，默认将其渲染为原生<button>元素，Blink内核的用户代理样式表为<button>设置了额外的默认内边距，而Firefox的默认按钮样式刚好和React Native Web的默认样式适配，因此仅在Edge下出现异常。

可落地修复方案 #

• 方案1：给Pressable组件添加样式覆盖浏览器默认属性
  在现有的样式表中新增重置样式，绑定到Pressable组件即可生效：

// StyleSheet中新增重置样式
pressableReset: {
  padding: 0,
  borderWidth: 0,
  appearance: 'none',
  backgroundColor: 'transparent',
  flexShrink: 0
}

修改Pressable组件代码：

<Pressable 
  style={styles.pressableReset}
  onPressIn={() => animate(animatedButtonPressed, 1)} 
  onPressOut={() => animate(animatedButtonPressed, 0)}
>

• 方案2：强制Pressable渲染为div元素
  直接给Pressable添加component="div"属性，跳过原生button元素的默认样式，该方案改造成本最低：

<Pressable 
  component="div"
  onPressIn={() => animate(animatedButtonPressed, 1)} 
  onPressOut={() => animate(animatedButtonPressed, 0)}
>

• 方案3：全局重置Web端按钮样式
  在项目入口的HTML文件的<style>标签中添加全局样式，一次性解决所有同类按钮样式异常问题：

button {
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
}

问题现象对比 #

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