Question

大家好，所以我开始学习本机响应，我正在尝试实现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>
);
}

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

1 个答案: