如何在android中使用9补丁图像反应原生？

Question

我有一个聊天气泡的9补丁图片。我将文本放在图像组件中。我希望图像根据文本框中的内容进行拉伸。

这是我的布局

<View style={{flexDirection: "row"}}>

   <View style={{flex: 0.8, backgroundColor:'#929238'}}>

       <Image source={require('../../patch.9.png')} style={{ flexWrap:'wrap'}}>
          <View style={{marginVertical: 15, marginLeft: 20, backgroundColor: 'white', padding:10}}>
             <Text style={{color: 'black'}}>{this.props.data.content}</Text>
          </View>
       </Image>
    </View>
    <View style={{flex: 0.2}}></View>
</View>

Answer 1

＆lt;图像＆GT; React-Native不再支持嵌套内容。

有很好的库可以在反应本地使用9补丁可绘制图像，例如https://github.com/madsleejensen/react-native-image-capinsets

以下是实施代码：

<View style = {styles.bubbleImageContainerStyle}>
     <ImageCapInset source = {Images.bubbleShape} capInsets = {{top:30, right:30, bottom:20, left:30}} style = {styles.bubbleImageStyle}/> 
     <Text style = {styles.textDescriptionStyle}>{this.props.description}</Text>
</View>

下面是CSS：

bubbleImageContainerStyle: {        
        marginHorizontal : 15,        
},
bubbleImageStyle: {        
        position :'absolute',
        height : '100%',
        width : '100%',        
 },
textDescriptionStyle:{                       
        marginHorizontal:15,
        marginTop : 25,       
        fontFamily: Fonts.regular,
        fontSize: 13,
        color: Colors.grayTextColor,       
},

请找到随附的9个补丁抽取样本气泡图像。

注意：我们给出了最高分辨率（4.x）图像，您可以分别制作不同分辨率的图像，如1.x，1.5x，2.x，3.x。