主页 / user-23892802

Feenix Net's questions

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

我正在使用 React Native 构建应用程序，但出现错误“文本字符串必须在组件内呈现”错误，尽管我没有在组件外呈现任何文本。这是发生错误的一部分。


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;

我尝试通过注释掉页面中的每个组件来找出错误来源。错误似乎出在 Navbar 组件中的 childrens 属性中。我这里没有在组件外渲染任何文本。有人能帮忙吗？

javascript