DrawerNavigator in React nativen arbeiten nicht

Question

ich versuchen, die drawernavigator in reagieren heimisch zu implementieren ... aber ich kann nicht das ich mit diesem Link zu tun für https://reactnavigation.org/docs/navigators/drawer implementieren aber ich bin nicht mit diesem Link Der Kodex Ich benutze

ist

class MyHomeScreen extends React.Component { 
    static navigationOptions = { 
    drawer:() => ({ 
     label: 'Home', 
     icon: ({ tintColor }) => (
     <Image 
      source={require('./chats-icon.png')} 
      style={[styles.icon, {tintColor: tintColor}]} 
     /> 
    ), 
    }), 
    } 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.navigate('Notifications')} 
     title="Go to notifications" 
     /> 
    ); 
    } 
} 

class MyNotificationsScreen extends React.Component { 
    static navigationOptions = { 
    drawer:() => ({ 
     label: 'Notifications', 
     icon: ({ tintColor }) => (
     <Image 
      source={require('./notif-icon.png')} 
      style={[styles.tabIcon, {tintColor: tintColor}]} 
     /> 
    ), 
    }), 
    } 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.goBack()} 
     title="Go back home" 
     /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    icon: { 
    width: 24, 
    height: 24, 
    }, 
}); 

const MyApp = DrawerNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    Notifications: { 
    screen: MyNotificationsScreen, 
    }, 
}); 


AppRegistry.registerComponent('SimpleApp',() => SimpleApp); 

diese werden alle Daten i in App.js Datei gehalten ... und in index.android.js Datei importieren ich diese wie

import './App'; 

dieser Code nicht zeigen, um diesen Fehler zu arbeiten. Dies ist der Fehler Screenshot Error Screen

Answer 1

Ersetzen Sie Ihre index.android.js Dateicode mit unten. Ich habe das Arbeitsbeispiel unten gezeigt.

import React from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Button, 
    Image 
} from 'react-native'; 
import { DrawerNavigator } from "react-navigation"; 

class MyHomeScreen extends React.Component { 
    static navigationOptions = { 
    drawer:() => ({ 
     label: 'Home', 
     icon: ({ tintColor }) => (
     <Image 
      source={require('./chats-icon.png')} 
      style={[styles.icon, {tintColor: tintColor}]} 
     /> 
    ), 
    }), 
    } 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.navigate('Notifications')} 
     title="Go to notifications" 
     /> 
    ); 
    } 
} 

class MyNotificationsScreen extends React.Component { 
    static navigationOptions = { 
    drawer:() => ({ 
     label: 'Notifications', 
     icon: ({ tintColor }) => (
     <Image 
      source={require('./notif-icon.png')} 
      style={[styles.tabIcon, {tintColor: tintColor}]} 
     /> 
    ), 
    }), 
    } 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.goBack()} 
     title="Go back home" 
     /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    icon: { 
    width: 24, 
    height: 24, 
    }, 
}); 

const MyApp = DrawerNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    Notifications: { 
    screen: MyNotificationsScreen, 
    }, 
}); 


AppRegistry.registerComponent('SimpleApp',() => MyApp); 

Answer 2

Ich denke, so gibt es keine jede Methode Schublade Navigator anzuwenden, ohne i dies versuchen, mit api aber so nicht vollständig i api verwenden, ... Sie auch die Schublade Navigator api für diese

Answer 3

https://snack.expo.io/SJTS5z24Z

verwenden

import React from 'react'; 
import { 
    Button, 
} from 'react-native'; 
import { DrawerNavigator } from "react-navigation"; 

class MyHomeScreen extends React.Component { 
    static navigationOptions = { 
    drawer:() => ({ 
     label: 'Home' 
    }), 
    } 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.navigate('DrawerOpen')} 
     title="Open drawer" 
     /> 
    ); 
    } 
} 

class MyNotificationsScreen extends React.Component { 
    static navigationOptions = { 
    drawer:() => ({ 
     label: 'Notifications' 
    }), 
    } 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.goBack()} 
     title="Go back home" 
     /> 
    ); 
    } 
} 

const MyApp = DrawerNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    Notifications: { 
    screen: MyNotificationsScreen, 
    }, 
}); 


export default MyApp;