React Native实现图片文本混合显示

实现图片文本混合显示的做法本质上是利用了文本的嵌套功能。

具体代码：

     render() {
      return(
          <View>
             <Text style={styles.text}>  //
               <Text onPress={()=>{
                   //点击图片按钮具体要做的事（给图片一个点击事件）
               }}>
                 文字与图片的混合展示，并且图片带有点击效果
                 <Image source={require('../Myimgs/docment.png')} />                          
               </Text>
             </Text>
          </View>
    );}
    const styles = StyleSheet.create({
      text:{
         lineHeight: 20,
         fontSize:12,
         marginTop:60,
         marginBottom:150,
         marginLeft:20,
         marginRight:20,
      },
});

图片和文字等高：

<Text style={{ width: JDDevice.getRpx(226), lineHeight: JDDevice.getRpx(20), }} numberOfLines={2}>
      <Image source={{ uri:`${this.imgHead}${imgUrl}` }} placeholder="" style={{ width: JDDevice.getRpx(100), height: JDDevice.getRpx(20) }} />
      <Text >图片和文字等高，且最多展示两行的效果</Text >
</Text >

效果图：

参考：https://blog.csdn.net/H_Ydd/article/details/77450525