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

Question

坦率地说，我是 React Native 的新手。我最近不得不放弃一个项目并从头开始。我写了这个简单的代码来确保一切都正常运行，令我惊讶的是抛出了一个异常。我一直在寻找解决方案很长一段时间。我将此代码放入 Snack.expo.io，当选择 Web 选项卡时它可以工作，但在 Android 和 IOS 上代码不运行。如果您需要任何进一步的信息来帮助我，请告诉我。这是一个世博项目。我发现了类似的情况，有人建议删除 npm 模块文件夹 > 运行 npm install > npm start（在我的例子中是 yarn start）。我这样做了，没有任何变化。太感谢了。应用程序.jsimport '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);

Answer 1

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

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

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

<Text>在文档中进一步阅读：

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

所以可能你可以在那里应用你的样式而不是使用<h1>.

+1补充：

不要忘记导入<Text>为：

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

Answer 2

h1 是一个网络语法，尝试用文本替换它。在使用之前从 react native 导入它。