react-native - 渲染错误: Text strings must be rendered within a Component

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>