DrawerNavigator在本地做出反应不工作

Question

我尝试实现反应原始的drawernavigator ...但我不这样做，我用这个链接，实现 https://reactnavigation.org/docs/navigators/drawer 但我不能与此链接 代码中，我用做是

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); 

这所有的数据我一直在App.js文件...在index.android.js文件导入我这个喜欢

import './App'; 

这个代码不工作就显示这个错误。 这是错误截图Error Screen

Answer 1

用下面的替换你的index.android.js文件代码。我已经在下面显示了工作示例。

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

我是这么认为的有没有申请抽屉导航，而无需使用API​​我尝试这一点，但没有完成，所以我使用的API的任何方法，......你还可以使用抽屉导航API此

Answer 3

https://snack.expo.io/SJTS5z24Z

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;