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

Question

我正在开发一个PDF查看器应用程序。

问题：我使用存储在Firebase数据库中的Flatlist显示所有PDF。我正在使用react native expo。当我在带有expo的浏览器中打开应用程序时，它就可以工作了。但当我在手机上运行它时，它会显示一个错误，如下所示。

错误：Render Error : Text strings must be rendered within a <Text> Component

import React,{useEffect, useState} from "react";
import { FlatList, Text, StyleSheet, TouchableOpacity, View} from 
"react-native";
import { config } from "../firebaseconfig";
import { getDatabase, ref ,onValue } from "firebase/database";
import { initializeApp } from "firebase/app";
const app = initializeApp(config);
function Books({navigation}) {
const [value ,setValue] = useState([]);
function readFunction() {
const db = getDatabase(app);
const reference = ref(db, "Books");
onValue(reference, (snapshot) => {
var main = [];
snapshot.forEach((childSnapshot) => {
const childKey = childSnapshot.key;
const childData = childSnapshot.val();
main.push({
title: childKey,
key:childData
});
});
setValue(main);
})

}
useEffect(() => {
readFunction()
},[]);
function renderItem({item}){
const path = item.key;
return (
<View style={styles.container}>
<View style={styles.square}>
<Text style={styles.h1}>{item.title}</Text>
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Document', {path})}>Read</TouchableOpacity>
</View>
</View>

)
};
return (
<FlatList
data={value}
renderItem={renderItem}
keyExtractor={item => item.key}
/>
)
}
const styles = StyleSheet.create({
container:{
display: 'flex',
paddingLeft: '30px',
paddingRight:'30px',
paddingTop:'20px',
paddingBottom:'10px'
},
square:{
backgroundColor: 'white',
borderRadius: 4,
padding: '30px',
shadowColor: 'black',
shadowRadius: 10,
shadowOpacity: 1,
},
h1:{
textAlign: 'left',
fontFamily: 'Merriweather',
fontSize: 30,
},
p: {
textAlign: 'justify',
fontFamily: 'Open Sans',
fontSize: 15,
color: '#C8C8C8',
lineHeight: 18,
},
button: {
backgroundColor: '#3EDD84',
color: 'white',
width: '90px',
borderRadius: 3,
textAlign: 'center',
display: 'flex',
marginTop: '15px',
marginRight: '70px',
lineHeight:30,
fontSize: 25,
fontFamily: 'merriweather',
}
});
export default Books;

Answer 1

尝试执行相同的

<View style={styles.container}>
<View style={styles.square}>
<Text style={styles.h1}>{item.title}</Text>
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Document', {path})}>
<Text>Read</Text>
</TouchableOpacity>
</View>

Answer 2

不能在TouchableOpacity组件内添加Text这样做：

<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Document', {path})}>
<Text>Read</Text>
</TouchableOpacity>

Answer 3

我认为TouchableOpacity标记之间的Read一词应该在Text标记中。