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

Question

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

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

错误： 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

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

Answer 2

您不能在 TouchableOpacity 组件中添加文本这样做：

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

Answer 3

尝试这样做

<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>

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

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

react-native

react-native-flatlist