android-layout - 如何在 android react native 中使用 9 Patch 图像？

Question

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

这是我的布局

<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

React-Native 不再支持具有嵌套内容的

。

有很好的库可以在 react-native 中使用 9 patch drawable 图像，例如 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。