React Native Custom Button（包括两个背景，两个内部组件）

Question

如何在React Native中创建该按钮？

如上所述，按钮组件包括两个部分，左边是文本部分，右边包括另一种背景颜色和图像。 但是，整个按钮组件包括相同的边界半径和渐变。 有人会知道该怎么做吗？

Answer 1

您应该用TouchableOpacity组件包装两个兄弟View组件，它们将为整个按钮处理onPress。使用flex并排放置它们，并在每一个上设置显式尺寸。左边的元素应该得到borderTopLeftRadius和borderBottomLeftRadius，右边的元素应该得到borderTopRightRadius和borderBottomRightRadius。边界半径是单独求解的，但看起来像是全部合为一体，对于渐变，您是指此内部阴影还是其他？

这是因为RN中不存在插入阴影，但是可以很实际地伪造它。在此处了解更多信息：https://github.com/facebook/react-native/issues/2255。

如果您真的不想使用渐变，则必须使用https://github.com/react-native-community/react-native-linear-gradient并将其绝对放置在所有内容上，然后使用zIndex属性在后台将其设置。