Блог

Я разрабатываю приложение для просмотра PDF-файлов.

Проблема: Я отображаю все PDF-файлы с помощью плоского списка, который хранится в базе данных Firebase. Я использую react-native expo. Когда я открываю приложение в браузере с помощью expo, оно работает. Но когда я запускаю его на своем телефоне, он показывает мне ошибку, как указано ниже.

Ошибка: Render Error : Text strings must be rendered within a lt;Textgt; 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) =gt; {  var main = [];  snapshot.forEach((childSnapshot) =gt; {  const childKey = childSnapshot.key;  const childData = childSnapshot.val();  main.push({  title: childKey,  key:childData  });  });  setValue(main);  })    }  useEffect(() =gt; {  readFunction()  },[]);  function renderItem({item}){  const path = item.key;   return (  lt;View style={styles.container}gt;  lt;View style={styles.square}gt;   lt;Text style={styles.h1}gt;{item.title}lt;/Textgt;  lt;TouchableOpacity style={styles.button} onPress={() =gt; navigation.navigate('Document', {path})}gt;Readlt;/TouchableOpacitygt;  lt;/Viewgt;  lt;/Viewgt;    )  };  return (  lt;FlatList  data={value}  renderItem={renderItem}  keyExtractor={item =gt; item.key}  /gt;  ) }  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;  

Попробуйте сделать то же самое

 lt;View style={styles.container}gt; lt;View style={styles.square}gt;  lt;Text style={styles.h1}gt;{item.title}lt;/Textgt;  lt;TouchableOpacity style={styles.button} onPress={() =gt; navigation.navigate('Document', {path})}gt;  lt;Textgt;Readlt;/Textgt;  lt;/TouchableOpacitygt; lt;/Viewgt;  

Вы не можете добавить текст внутри компонента TouchableOpacity, Сделайте это:

 lt;TouchableOpacity style={styles.button} onPress={() =gt; navigation.navigate('Document', {path})}gt;  lt;Textgt;Readlt;/Textgt; lt;/TouchableOpacitygt;  

Я думаю, что слово, прочитанное между тегами TouchableOpacity, должно быть внутри текстовых тегов.