React Navigation 说渲染没有返回任何内容

Question

我有 React 导航设置来返回我的组件，到目前为止，从我阅读和观看的内容来看，一切似乎都已正确设置，当我通过 expo 加载应用程序时，我得到“Invariant Violation: _default(...): Nothing was从渲染返回。” 我不确定我的导航器本身是否有问题，或者我如何调用我的导航器？不确定它是如何知道在 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

如果在箭头函数中使用花括号，请添加 return

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>;
})