组件异常：文本字符串必须在 <Text> 组件内呈现答案

【问题标题】：Component Exception: Text strings must be rendered within a <Text> component组件异常：文本字符串必须在 <Text> 组件内呈现
【发布时间】：2021-02-02 14:25:11
【问题描述】：

和我在一起，我对 React Native 很陌生。我最近不得不放弃一个项目并从头开始。我编写了这个简单的代码来确保一切正常并运行，令我惊讶的是抛出了一个异常。我一直在寻找解决方案很长时间。 I put this code into Snack.expo.io and it works when the Web tab is selected, but on Android and IOS the code does not run.如果您需要任何进一步的信息来帮助我，请告诉我。这是一个世博项目。我发现了类似的情况，有人建议删除 npm 模块文件夹 > 运行 npm install > npm start（在我的情况下是 yarn start）。我这样做了，没有任何变化。非常感谢。

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { View } from "react-native";
import { registerRootComponent } from 'expo';

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

export default class App extends React.Component {
    render() {
        return (
            <View>
                <Welcome name="Sara" />
                <Welcome name="Cahal" />
                <Welcome name="Edite" />
            </View>
        );
    }
}

registerRootComponent(App);

【问题讨论】：

标签： javascript reactjs react-native jsx

【解决方案1】：

您可以尝试将 <Welcome /> 组件声明为以下内容：

function Welcome(props) {
    return <Text>Hello, {props.name}</Text>;
}

按照错误消息的提示查看从<h1> 到<Text> 的区别。

在文档中进一步了解<Text>：

文本支持嵌套、样式和触摸处理。

所以也许你可以在那里应用你的样式而不是使用<h1>。

+1 加法：

别忘了将<Text> 导入为：

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

【讨论】：

啊...所以是新手，我想确保我的每一行都是正确的，所以这段代码实际上是 React 网站上显示的示例，然后我意识到我的错误，文档我看的不是 React Native。

【解决方案2】：

h1 是一个 web syntex，尝试用文本替换它。在使用从 react native 导入之前。

【讨论】：