错误 [React Native]：渲染器未返回任何内容

Question

Hello everyone so i have started learning react native and i was trying to implement DrawerNavigation. While doing so I was trying to invoke my HomeStackScreen from externl js file but it is throwing error "Nothing was returned from render."

my App.js is ---->

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;

And this is my HomeScreen in which i was trying to make a login page. and here i have defined two text input and getting username and password from user and then i was trying to validate those credentials and display the alert message.

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

Answer 1

You should return the content from the components, same thing should be done for DetailStackScreen as well.

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