錯誤 [React Native]：渲染器未返回任何內容

Question

大家好，我已經開始學習 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>
        );
    }
}

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