无法使用onItemPress键从“客户抽屉”屏幕导航到登录页面

时间:2020-05-31 11:09:34

标签: react-native react-native-android react-native-ios react-native-navigation react-native-drawer

我有这样的DrawerNavigation:

import React from 'react';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';
import homeStack from '../routes/homeStack';
import Coupon from '../drawerScreen/coupon';
import Order from '../drawerScreen/order';
import Reffer from '../drawerScreen/reffer';
import CustomeDrawer from '../drawerScreen/customeDrawer'
import LoginDrawer from '../drawerScreen/loginDrawer';
import Login from '../login/login'
const Drawer = createDrawerNavigator({
    Home:{
        screen:homeStack
    },
    Coupon:{
        screen:Coupon
    },
    Order:{
        screen:Order
    },
    Reffer:{
        screen:Reffer
    },   
}, 
{
    contentComponent:CustomeDrawer,
    contentOptions: ({navigation})=> {
        return{
            onItemPress: <LoginDrawer navigation={navigation} />
        }
    }
})

export default createAppContainer(Drawer)

我有一个这样的CustomeDrawer屏幕:

    import React from 'react';
    import { StyleSheet, Text, View, ScrollView } from 'react-native';
    import {DrawerNavigatorItems} from 'react-navigation-drawer'
    import LoginDrawer from '../drawerScreen/loginDrawer';

    export default function CustomeDrawer({...props}) {
      return (
        <View>
          <LoginDrawer/>
          <View style={styles.drawer}>
                <DrawerNavigatorItems {...props}/>
          </View>
        </View>
      );
    }

    const styles = StyleSheet.create({
        drawer:{
            top:30
        }
    })

我有一个LoginDrawer屏幕,如下所示:

    import React from 'react';
    import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
    import CustomeDrawer from '../drawerScreen/customeDrawer';

    export default function LoginDrawer({navigation}) {
      const pressHandler = () => {
        navigation.navigate('Login')
      }

      return (
        <View style={styles.title}>
          <TouchableOpacity onPress={pressHandler}>
            <Text style={styles.login}>Login</Text>
          </TouchableOpacity>
          <CustomeDrawer/>
        </View>
      );
    }
    const styles = StyleSheet.create({
        login:{
            fontSize:25
        },
        title:{
            padding:10,
            marginHorizontal:50,
            backgroundColor:'pink',
        }
    })

当我尝试从Custom Darwer的LoginDrawer导航到Login页面时,以上代码引发错误。

一切正常,但是当我使用contentOptions的onItemPress按下customeDrawer的Login时。引发错误。我正在使用Navigation 4X,并且已经创建了与onItemPress相关的所有内容。请帮我找出错误原因。

0 个答案:

没有答案