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

Question

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

应用程序.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);

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 导入它。