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

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

如果在箭头函数中使用大括号，则添加回车符

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