React Navigation 說渲染沒有返回任何內容

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

應用程序.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

如果您在箭頭 function 中使用花括號，請添加 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>;
})