React Navigation表示渲染后没有返回任何内容

Question

我已经设置了React导航来返回我的组件，从我阅读和观看的内容来看，到目前为止一切似乎都设置正确，当我通过expo加载应用程序时，我得到 "Invariant Violation: _default(...)。没有从渲染中返回任何东西。" 我不知道是我的Navigator本身有问题，还是我调用Navigator的方式可能有问题？不知道它到底是怎么知道调用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 正在返回undefined，这就是为什么你会得到这个错误。

另外，修改

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