如何使这段代码与React Native一起工作

Question

我最近开始学习React Native，我希望有人能帮助我。

几个小时以来，我一直试图让以下代码与React Native一起工作：来自简单字典的ResultList.js。问题是这里的纯HTML：

return (
<div className="bg-gray-700">
<div className="container mx-auto py-8">
<h1 className="text-3xl font-bold text-center text-white">Simple Dictionary</h1>
<p className="text-center mt-1 mb-10 text-slate-300 text-lg">Find definisions for word</p>

<div className="flex items-center justify-center mt-5">
<div className="flex border-2 border-gray-200 rounded">
<input className="px-4 py-2 md:w-80" type="text" placeholder="Search..." onChange={handleInputChange} value={value} onKeyDown={handleInputKeyDown} />
<button className="bg-blue-400 border-l px-4 py-2 text-white" onClick={handleSubmit}>Search</button>
</div>
</div>
{ inputValue && (
<h3 className="text-gray-50 text-center mt-4">Result for: <span className="text-white font-bold">{inputValue}</span></h3>
) }
</div>
</div>

错误为

ERROR  Error: Text strings must be rendered within a <Text> component.
This error is located at:
in h1 (created by SearchHeader)
in div (created by SearchHeader)
in div (created by SearchHeader)
in SearchHeader (created by App)
in div (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in AwesomeProject(RootComponent), js engine: hermes

我试过"；WebView"。。没有成功。。。我该怎么办？

你好，Frank

编辑：我监督了顺风初始化。。。我按照文档中描述的方式进行，构建过程由启动

npx react-native run-android

但是同样的错误。。。我不知道我做错了什么。

Answer 1

使用webview尝试以下代码：

import React from 'react';
import { View, StyleSheet  } from 'react-native';
import { WebView } from 'react-native-webview';
const HTML = `
<div className="bg-gray-700">
<div className="container mx-auto py-8">
<h1 className="text-3xl font-bold text-center text-white">Simple Dictionary</h1>
<p className="text-center mt-1 mb-10 text-slate-300 text-lg">Find definisions for word</p>

<div className="flex items-center justify-center mt-5">
<div className="flex border-2 border-gray-200 rounded">
<input className="px-4 py-2 md:w-80" type="text" placeholder="Search..." onChange={handleInputChange} value={value} onKeyDown={handleInputKeyDown} />
<button className="bg-blue-400 border-l px-4 py-2 text-white" onClick={handleSubmit}>Search</button>
</div>
</div>
</div>
</div>
`;
export default function App() {
return (
<View style={styles.container}>
<WebView
originWhitelist={['*']}
source={{ html: HTML }}
style={styles.webview}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
paddingTop: 100,
},
});