在 React Native 中为文本组件中的图像设置样式

Question

我正在尝试为 Text 组件中的 an 设置样式。 据我在很多论坛上看到的，不可能给它一个边距、宽度、高度。 我基本上想要做的是得到这样的结果：

想要的结果

问题是，如果我将所有内容都包装在 View 组件中作为父级，图像也会在文本上方一点点，我将无法对其进行样式设置。

任何帮助，将不胜感激！ :)

Answer 1

您可以在 Text Component 中设置 Image 样式，如下所示，并获得您提供的图片

 <Text> Hello I am  
  <Image
      style={{   width: 30, 
        height: 30,}}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  {"Text after image" }

 </Text>

Answer 2

对于对齐，你也可以这样走

    <View
      style={{flexDirection: 'row',
      alignItems: 'center', justifyContent:"center"
      }}>
   <Text> {"Text before image"}</Text>
   <Image
      style={{   width: 30, alignSelf:"center",
        height: 30,}}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
   <Text> {"Text after image" }</Text>
   </View>

结果如此链接

Answer 3

使用图像背景。

 <Text> Hello I am  
  <ImageBackground>
      style={{   width: 30, 
        height: 30,}}
      source={require('@expo/snack-static/react-native-logo.png')}
     resizeMode="cover" style={styles.image}>

     <Text style={styles.text}>Inside</Text>

    </ImageBackground>
  {"Text after image" }

 </Text>

阅读文档

Answer 4

 <Text>Hello: I am{` `}
       <Image
         source={require('your image path')}
         style={{height: 20, width: 20}}
       />
       {` `}
       John Doe and I want to get a result like this with react-native
 </Text>

Answer 5

为了使它看起来像一个文本，将结果放在此链接中让我知道这是否有效。 代码中的边距和行距可以通过响应式屏幕大小进行调整。 此贴供参考

<Text style={{lineHeight: 25,}}>Hello I am 

 <Image
 style={{width: 30, height: 30, marginStart:15, marginEnd:15, 
 marginTop:15, marginBottom:-8}}
  source={require('@expo/snack-static/react-native-logo.png')}
 />
 
<Text style={{lineHeight: 25,}}> Comments like this are just amazing. 
</Text>

</Text>