我有一个模块,我需要在 LoginScreen 中使用堆栈导航器,但是当用户成功登录抽屉导航器时,将实现而不是堆栈导航器。现在我收到一个错误提示。
<块引用>函数作为 React 子元素无效。如果您返回 Component 而不是从 render 返回,则可能会发生这种情况。或者,您可能打算调用此函数而不是返回它。
我的 app.js 上有什么
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const UnauthenticatedScreen = () => {
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options=
{{
headerShown: false,
}}
/>
<Stack.Screen
name="Registration"
component={Register}
options={{
headerStyle: {
backgroundColor: '#4ABDFF'
},
headerTitleStyle: {
color: '#fff',
},
headerTintColor:'#fff',
}}
/>
<Stack.Screen
name="Privacy"
component={PrivacyPolicy}
options={{
headerStyle: {
backgroundColor: '#4ABDFF'
},
headerTitleStyle: {
color: '#fff',
},
headerTitle:'Privacy Policy',
headerTintColor:'#fff',
}}
/>
<Stack.Screen
name="RegistrationSuccess"
component={RegistrationSuccess}
options=
{{
headerShown: false,
}}
/>
</Stack.Navigator>
}
function AuthenticatedDriverScreen() {
<Drawer.Navigator initialRouteName="DriverDashboard">
<Drawer.Screen
name="DriverDashboard"
component={DriverDashboard}
options={{ drawerLabel: 'Home' }}
/>
</Drawer.Navigator>
}
function App() {
const isLogin = false;
return (
<NavigationContainer>
{isLogin ? AuthenticatedDriverScreen : UnauthenticatedScreen}
</NavigationContainer>
)
}
export default App;
非常感谢您的帮助。
答案 0 :(得分:1)
我找到了正确答案: 组件而不是渲染
<NavigationContainer>
{isLogin ? <AuthenticatedDriverScreen/> : <UnauthenticatedScreen/>}
</NavigationContainer>
答案 1 :(得分:0)
您没有返回 jsx,而只是在函数体中输出它。但是如果你不想手动写return,那么使用这个语法:const component = () => (jsx).
如果你很懒,直接复制粘贴固定代码:
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const UnauthenticatedScreen = () => (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options=
{{
headerShown: false,
}}
/>
<Stack.Screen
name="Registration"
component={Register}
options={{
headerStyle: {
backgroundColor: '#4ABDFF'
},
headerTitleStyle: {
color: '#fff',
},
headerTintColor:'#fff',
}}
/>
<Stack.Screen
name="Privacy"
component={PrivacyPolicy}
options={{
headerStyle: {
backgroundColor: '#4ABDFF'
},
headerTitleStyle: {
color: '#fff',
},
headerTitle:'Privacy Policy',
headerTintColor:'#fff',
}}
/>
<Stack.Screen
name="RegistrationSuccess"
component={RegistrationSuccess}
options=
{{
headerShown: false,
}}
/>
</Stack.Navigator>
)
function AuthenticatedDriverScreen() {
return (<Drawer.Navigator initialRouteName="DriverDashboard">
<Drawer.Screen
name="DriverDashboard"
component={DriverDashboard}
options={{ drawerLabel: 'Home' }}
/>
</Drawer.Navigator>)
}
function App() {
const isLogin = false;
return (
<NavigationContainer>
{isLogin ? AuthenticatedDriverScreen : UnauthenticatedScreen}
</NavigationContainer>
)
}
export default App;
我还没有测试过代码,但它应该可以工作。如果没有,请说。
答案 2 :(得分:0)
尝试更改(我没有测试过,请告诉我结果)
function AuthenticatedDriverScreen() {
到
const AuthenticatedDriverScreen= () => {
答案 3 :(得分:0)
创建根堆栈容器和抽屉容器。如果要在堆栈容器中显示 Drawer,请将组件指定为 Drawer Container。
import * as React from 'react';
import { Button,SafeAreaView, View, Platform,Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator,TransitionPresets } from '@react-navigation/stack';
import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory';
import { HeaderBackButton } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import { store } from './src/redux/store/store';
import {appColor} from './src/helper/constants'
//screens
import {Splash} from './src/screen/Splash'
import {Login} from './src/screen/Login'
import {ForgotPassword} from './src/screen/ForgotPassword'
import {Register} from './src/screen/Register'
import {Home} from './src/screen/Home'
import {SideMenu} from './src/screen/Drawer'
import {MyRewards,SubCategorieslist} from './src/screen/MyRewards'
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
function App() {
const RootStack = () =>{
return (
<Stack.Navigator style = {{flex:1}}>
<Stack.Screen name="SplashScreen" component={Splash} options={{headerShown: false}}/>
<Stack.Screen name="Login" component={Login} options={{headerShown: false}}/>
<Stack.Screen name ="Dashboard" component ={DrawerStack} options={{headerShown: false}}/>
</Stack.Navigator>
)
}
const DrawerStack = () =>{
return(
<Drawer.Navigator
drawerStyle={{width:300}}
drawerType="slide"
screenOptions={{
headerStyle: {
backgroundColor: appColor,
},
headerShown:true,
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
drawerContent={props => <SideMenu {...props} />}>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="MyRewards" component={MyRewards} options={{title:'My Rewards'}} />
<Drawer.Screen name="SubCategorieslist" component={SubCategorieslist} options= {({ navigation }) => ({title:'Sub-Categories',headerLeft: (props) => (<HeaderBackButton {...props} onPress={()=>{navigation.goBack(null)}}/>)})} />
</Drawer.Navigator>
)
}
return (
<View style = {{flex:1}}>
<Provider store={store}>
<NavigationContainer>
<RootStack/>
</NavigationContainer>
</Provider>
</View>
);
}
export default App;