Question

我有React导航设置来返回我的组件，到目前为止，所有内容似乎都已经从我阅读和观看的内容中正确设置，当我通过expo加载应用程序时，我得到“不变违规：_default（...）：渲染未返回任何内容。”我不确定导航器本身是否有问题，或者我怎么称呼导航器？不确定是否确切知道如何在HomeStack.Navigator中调用该特定组件，我想它需要某种类似的路由来调用以按其名称加载该特定组件？不确定会丢失整个文件。

导航文件

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../Home";

const HomeStack = createStackNavigator();
const HomeStackScreen = () => {
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} />
  </HomeStack.Navigator>;
};

export default () => {
  <NavigationContainer>
    <HomeStackScreen />
  </NavigationContainer>;
};

App.js文件

import React from "react";
import Navigation from "./config/navigation";

export default () => <Navigation />;

主页组件文件

import React from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bannerText: "PNW Plants",
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.banner}>
          <Text style={styles.bannerText}>{this.state.bannerText}</Text>
        </View>

        <Text
          style={{
            color: "darkgreen",
            marginTop: 40,
            fontSize: 22,
            textDecorationLine: "underline",
            textDecorationColor: "lightgrey",
          }}
        >
          Discovered Plants
        </Text>

        <ScrollView
          style={styles.grid}
          contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap" }}
        >
          <Text style={styles.gridUnit1}></Text>
          <Text style={styles.gridUnit}></Text>
          <Text style={styles.gridUnit}></Text>
          <Text style={styles.gridUnit}></Text>
          <Text style={styles.gridUnit1}></Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    alignItems: "center",
    overflow: "scroll",
  },
  banner: {
    backgroundColor: "darkgreen",
    height: 55,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  bannerText: {
    color: "white",
    fontSize: 30,
    fontWeight: "bold",
  },
  gridBanner: {
    fontSize: 26,
    marginTop: 40,
    color: "darkgreen",
  },

  grid: {
    display: "flex",
    padding: 10,
    width: "90%",
    borderTopWidth: 1,
    borderBottomWidth: 1,
    height: "60%",
    borderStyle: "solid",
    borderColor: "lightgrey",
    marginTop: 40,
    overflow: "hidden",
  },
  gridUnit: {
    backgroundColor: "lightgrey",
    height: 80,
    width: 80,
    margin: 10,
    overflow: "scroll",
  },
  gridUnit1: {
    backgroundColor: "orange",
    height: 80,
    width: 80,
    margin: 10,
  },
});

Answer 1

如果在箭头函数中使用花括号，则添加返回值

const HomeStackScreen = () => {
return (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} />
  </HomeStack.Navigator>
)
};

或者只是这样做

const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} />
  </HomeStack.Navigator>
)
};

在您的代码中，HomeStackScreen返回未定义，这就是您收到错误的原因。

还要修改

export default () => (
  <NavigationContainer>
    <HomeStackScreen />
  </NavigationContainer>;
})

反应导航说渲染没有返回任何内容

1 个答案: