javascript - 尝试创建按钮时出现异常 - 不变违规 : Text strings must be rendered within a component

Question

我正在学习 React Native。我有一个使用 expo-cli 设置的空白项目。我的 iPhone 上有 expo 应用程序，正在测试该应用程序。可悲的是，我未能创建一个简单的按钮。

首先，我从一个 hello world 应用开始，它正在运行。这是我的 App.js 文件，仅显示 hello world:

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Button} from "react-native-web";

export default function App() {
  const [outputText, setOutputText] = useState("Hello, world!");
  return (
      <View style={styles.container}>
        <Text>{outputText}</Text>
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

要添加将更改文本的按钮，我添加以下行:

<Button onPress={() => setOutputText("The text changed!")} title="Change Text"/>

所以现在我的 App.js 看起来像这样:

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Button} from "react-native-web";

export default function App() {
  const [outputText, setOutputText] = useState("Hello, world!");
  return (
      <View style={styles.container}>
        <Text>{outputText}</Text>
        <Button onPress={() => setOutputText("The text changed!")} title="Change Text"/>
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我刷新了我的应用程序，现在我遇到了以下错误，显示在我的手机上:

Invariant Violation: Text strings must be rendered within a <Text> component

我做错了什么？

Answer 1

显然，问题出在 Button 导入，因为 react-dom(react-native-web 需要的包)。我尝试使用 react-native 中的 Button 并且您的整个逻辑/代码工作正常。

删除导入

import {Button} from "react-native-web";

然后从 react-native 中导入 Button

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