RN官方对Image 是有ImageCapInset支持的
capInsets
When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the official Apple documentation.
TYPE REQUIRED PLATFORM
object: {top: number, left: number, bottom: number, right: number} No iOS
关键是这个只是描述的在iOS 而在Android就一点都没提及了 
我们要拉伸的图片 -
在iOS上确实能很好的支持
<Image
style={styles.hintContainer.bg}
source={require('../../img/hintBg.png')}
capInsets={{ top: 20, left: 20, bottom: 20, right: 20 }}
resizeMode="stretch"
但是安卓是对capInsets属性不生效的
解决:
有第三方包支持对安卓平台的 capInsets https://github.com/madsleejensen/react-native-image-capinsets
react-native-image-capinsets
adds support for a similar functionality as <Image capInsets={...} /> to android. behind the scenes it will generate a NinePatchDrawable and set as background for the android ImageView
Installation
npm i --save react-native-image-capinsets
react-native link react-native-image-capinsets
Examples
import ImageCapInset from 'react-native-image-capinsets';
<ImageCapInset
source={require('./bubble.png')}
capInsets={{ top: 8, right: 8, bottom: 8, left: 8 }}
/>
效果
另外在安卓参数稍微要改一下 比如iOS 是20 这里安卓是15左右
<ImageCapInset
style={styles.hintContainer.bg}
source={require('../../img/hintBg.png')}
capInsets={{ top: 15, left: 15, bottom: 15, right: 15 }}
resizeMode="stretch"
/>
