文本字符串必须在 <Text> 组件中呈现，答案

【问题标题】：Text strings must be rendered within a <Text> component,文本字符串必须在 <Text> 组件中呈现，
【发布时间】：2020-12-16 09:25:41
【问题描述】：

我有以下代码，其中我在地图中使用了特色组件，地图的值在特色数组中给出。

import * as React from 'react';
import { StyleSheet, TextInput, Image, Button, Pressable } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import Featured from '../components/Featured';

export default function TabOneScreen({navigation}) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Discover Music to Own</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
          <TextInput style={styles.searchbar}
      placeholder="Search Music to Own"/>
          {featured.map((feat) =>
              {return (<Featured
                       artistName= {feat.artistName}
                       mediaName= {feat.mediaName}
                       uri= {feat.uri}
                  />
)}
              )}     </View>
  );
}


const featured = [{uri:"https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
                   artistName:"Beyonce",
                   mediaName:"Good Album Name"}]

但是，我收到以下错误：

Text strings must be rendered within a <Text> component.

如何解决这个错误？

【问题讨论】：

您的自定义Text 组件看起来如何？
请把所有导入的代码也加进去。

标签： javascript reactjs react-native

【解决方案1】：

该错误很可能取决于您在 Themed 中使用的<Text>，否则我已将密钥添加到地图并格式化代码。

import * as React from 'react';
import { StyleSheet, TextInput, Image, Button, Pressable } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import Featured from '../components/Featured';

export default function TabOneScreen({ navigation }) {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Discover Music to Own</Text>
            <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
            <TextInput 
                style={styles.searchbar}
                placeholder="Search Music to Own" 
            />
            {
                featured.map((feat, index) => {
                    return (
                        <Featured
                            artistName={feat.artistName}
                            mediaName={feat.mediaName}
                            uri={feat.uri}
                            key={index}
                        />
                    )
                })
            }
        </View>
    )
}

const featured = [{
    uri: "https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
    artistName: "Beyonce",
    mediaName: "Good Album Name"
}]

【讨论】：

【解决方案2】：

只需将div 包裹在其中

<div>
   {featured.map((feat) =>
       {return (<Featured
            artistName= {feat.artistName}
            mediaName= {feat.mediaName}
            uri= {feat.uri}
         />
       )}
   )}
</div>

【讨论】：

div 在本机反应？
你确定吗？ div标签用于react native？