React Native Paper按钮dashed border样式失效问题求助

方案1：改用wrapperStyle设置边框 #

React Native Paper的Button组件中，contentStyle仅作用于内部内容容器，容易因组件内部布局限制导致边框截断。改用wrapperStyle（作用于按钮外层容器）来设置边框样式：

<Text>Select Document:</Text>
<Button
    mode="text"
    icon={"plus"}
    onPress={pickDocument}
    wrapperStyle={{
        height: 50,
        borderWidth: 1,
        borderStyle: "dashed",
        borderColor: '#060d60',
        borderRadius: 4, // 可选，优化边框边角显示
    }}
    contentStyle={{
        justifyContent: 'center', // 确保按钮内容垂直居中
    }}
>
    Select Document
</Button>

方案2：用外层View包裹实现自定义边框 #

如果方案1不生效，可通过外层View完全控制边框区域，不受Button组件内部样式影响：

<Text>Select Document:</Text>
<View style={{
    height: 50,
    borderWidth: 1,
    borderStyle: "dashed",
    borderColor: '#060d60',
    borderRadius: 4,
    justifyContent: 'center',
    paddingHorizontal: 8, // 可选，调整按钮内容与边框的间距
}}>
    <Button
        mode="text"
        icon={"plus"}
        onPress={pickDocument}
        contentStyle={{
            height: '100%',
        }}
    >
        Select Document
    </Button>
</View>

问题根源 #

React Native Paper的Button在mode="text"模式下，内部内容容器存在默认的padding或overflow设置，导致contentStyle中定义的边框被截断。使用外层容器或组件提供的wrapperStyle能避开这些内部限制，完整展示虚线边框。

内容的提问来源于stack exchange，提问作者B. asasa