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

【问题标题】：Error [ React Native ]: Nothing was returned from render错误 [React Native]：渲染没有返回任何内容
【发布时间】：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>
        );
    }
}

【问题讨论】：

标签： javascript react-native render

【解决方案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>
);
}

【讨论】：

谢谢！它帮了很多忙。