[英]React Navigation saying nothing was returned from render
我有 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,
},
});
如果您在箭头 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>;
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.