Início / user-23892802

Feenix Net's questions

Martin Hope
Feenix Net
Asked: 2024-08-22 04:41:09 +0800 CST
  • 5

Estou construindo um aplicativo usando React Native, mas recebo um erro dizendo "Sequências de texto devem ser renderizadas dentro de um componente", embora não tenha nenhum texto renderizado fora do componente. Esta é a parte em que ocorre o erro.


import React from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import TopBar from "./Topbar";
import BottomNavBar from "./BottomNavbar";

const Layout = ({ children }) => {
  console.log("Children prop:", children);
  return (
    <SafeAreaView style={styles.container}>
      <TopBar />
      <View style={styles.contentContainer}>
        {children} {/* This is where the page-specific content will go */}
      </View>
      <BottomNavBar />
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000000",
  },
  contentContainer: {
    flex: 1,
    marginBottom: 60, // Adjust to ensure content isn't hidden behind the navbar
  },
});

export default Layout;


import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ImageBackground,
  Image,
  Dimensions,
} from "react-native";
import Layout from "../layout/Layout"; // Import the Layout component

const { width, height } = Dimensions.get("window");

const Home = () => {
  return (
    <Layout>
      <ImageBackground
        source={require("../../../assets/home.jpg")}
        style={styles.backgroundImage}
      >
        <View style={styles.overlay} />

        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Enjoy The Game</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Find Your Match</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Plan Your Date</Text>
        </TouchableOpacity>
      </ImageBackground>
    </Layout>
  );
};

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    width: width,
    height: height,
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.4)",
  },
  button: {
    width: width * 0.8,
    padding: 15,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: "#ffffff",
    justifyContent: "center",
    alignItems: "center",
    marginVertical: 10,
    backgroundColor: "rgba(255, 255, 255, 0.1)",
  },
  buttonText: {
    fontSize: 20,
    color: "#ffffff",
    fontFamily: "Playfair",
  },
  cursorIcon: {
    position: "absolute",
    width: 30,
    height: 30,
    right: -35,
    top: -10,
  },
});

export default Home;

Tentei descobrir a origem do erro comentando cada componente nas páginas. O erro parece estar no suporte infantil no componente Navbar. Não tenho nenhum texto renderizado fora do componente aqui. Alguém poderia ajudar com isso?

javascript