Javascript React Native中除图像外的上下文本

Javascript React Native中除图像外的上下文本,javascript,html,image,react-native,text,Javascript,Html,Image,React Native,Text,我目前正在尝试在react native中除了图像之外编写上下文本,如下所示: [照片1]歌名 [照片1]歌曲名称 但我得到的是这样的东西: [照片1]歌名歌名 歌曲的标题和名字应该在像标题和副标题这样的图像之外。我尝试了很多方法,包括制作儿童文本组件,但都没有成功。我的代码如下所示,供您参考: import React, { Component } from 'react'; import { View, Image, Text } from 'react-native'; export d

我目前正在尝试在react native中除了图像之外编写上下文本,如下所示:

[照片1]歌名

[照片1]歌曲名称

但我得到的是这样的东西:

[照片1]歌名歌名

歌曲的标题和名字应该在像标题和副标题这样的图像之外。我尝试了很多方法,包括制作儿童文本组件,但都没有成功。我的代码如下所示,供您参考:

import React, { Component } from 'react';
import { View, Image, Text } from 'react-native';

export default class DisplayAnImage extends Component {
  render() {
    return (
      <Text>
        <Image
          style={{width: 50, height: 50}}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
        <Text> Song Name </Text>
        <Text> Song Title </Text>
      </Text>
    );
  }
}
import React,{Component}来自'React';
从“react native”导入{视图、图像、文本};
导出默认类DisplayAnImage扩展组件{
render(){
返回(
歌名
歌曲名称
);
}
}


您可以在第一个文本元素中添加一个
<代码>歌曲名称
或者更好的方法是给他们提供类并使用css设置样式?
<View style={{ flexDirection: 'row' }}>
    <Image style={{ width: 50, height: 50}} source={require('@expo/snack-static/react-native-logo.png')}
    <View style={{justifyContent: 'center'}}>
        <Text>this is heading</Text>
        <Text>this is subheading</Text>
   </View>
</View>