错误 [React Native]：渲染没有返回任何内容

Posted 2023-02-22

【中文标题】错误 [React Native]：渲染没有返回任何内容

【英文标题】：Error [ React Native ]: Nothing was returned from render

【发布时间】：2020-09-14 00:52:39

【问题描述】：

大家好，我已经开始学习 React Native，我正在尝试实现 DrawerNavigation。 这样做时，我试图从 externl js 文件调用我的 HomeStackScreen，但它抛出错误“没有从渲染返回。”

我的 App.js 是---->

const HomeStack = createStackNavigator();
const DetailStack = createStackNavigator();
const Drawer = createDrawerNavigator();

const HomeStackScreen = (navigation) => 
  <HomeStack.Navigator screenOptions=
    headerStyle: 
      backgroundColor: '#009387'
    ,
    headerTintColor: '#fff',
    headerTitleStyle: 
      fontWeight: 'bold'
    
  >
    <HomeStack.Screen name="Home" component=HomeScreen />
  </HomeStack.Navigator>


const DetailStackScreen = (navigation) => 
  <DetailStack.Navigator screenOptions=
    headerStyle: 
      backgroundColor: '#009387'
    ,
    headerTintColor: '#fff',
    headerTitleStyle: 
      fontWeight: 'bold'
    
  >
    <DetailStack.Screen name="Home" component=DashboardScreen/>
  </DetailStack.Navigator>


const App = () => 
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component=HomeStackScreen />
        <Drawer.Screen name="Details" component=DetailStackScreen />
      </Drawer.Navigator>
      /* */
    </NavigationContainer>
  );
;

export default App;

这是我试图在其中创建登录页面的主屏幕。在这里我定义了两个文本输入并从用户那里获取用户名和密码，然后我试图验证这些凭据 并显示警报消息。

import React,  Component  from 'react'
import 
    View,
    Text,
    TouchableOpacity,
    Button,
    Alert
 from 'react-native';
import  TextInput  from 'react-native-gesture-handler';
import styles from './styles'
export default class Home extends React.Component 

    constructor(props) 
        super(props)
    
state = 
username:"",
password:""

    validateUser()
        if(this.state.username="admin" && this.state.password=="admin")
        
            Alert.alert("Access","You have login",[
               text:'okay',
           ])    
         else 
           Alert.alert("ERROR","Incorrect Username/Password",[
               text:'okay',
           ])    

        
    
    render() 
        const  mainConatiner, heading, input,  = styles
        return (
            <View style=mainConatiner>
                <Text style=heading>Login to Application</Text>
                <TextInput style=input placeholder="User Name" onChangeText=text=>this.setState(username:text)/>
                <TextInput style=input secureTextEntry=true placeholder="Password" onChangeText=text=>this.setState(password:text)/>
                <Button title="Login" onPress=()=>this.validateUser() />
            </View>
        );
    

【参考方案1】：

你应该从组件中返回内容，同样的事情也应该为 DetailStackScreen 做。

const HomeStackScreen = (navigation) => 
 return (
 <HomeStack.Navigator screenOptions=
    headerStyle: 
      backgroundColor: '#009387'
    ,
    headerTintColor: '#fff',
    headerTitleStyle: 
      fontWeight: 'bold'
    
  >
    <HomeStack.Screen name="Home" component=HomeScreen />
  </HomeStack.Navigator>
);

【讨论】：

谢谢！它帮了很多忙。