DrawerNavigator在本地做出反應不工作

我嘗試實現反應原始的drawernavigator ...但我不這樣做，我用這個鏈接，實現 https://reactnavigation.org/docs/navigators/drawer 但我不能與此鏈接代碼中，我用做是DrawerNavigator在本地做出反應不工作

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

來源

2017-04-11 hammad

什麼不起作用？ – WilomGfx

主席先生，我想要一個運行ios和android的drawerNavigator我遵循這個許多鏈接，但沒有人工作 – hammad

https://reactnavigation.org/docs/navigators/drawer – hammad

用下面的替換你的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);

來源

2017-04-12 06:52:45

我使用上面的代碼仍然是一樣的錯誤....我使用窗口平臺 – hammad

一旦你運行react-native run-android命令，你必須運行反應 - 在你的項目文件夾中啓動命令並重新加載應用程序。 –

先生，我做了很多次，但也有同樣的錯誤，因爲我提到以上 – hammad

我是這麼認爲的有沒有申請抽屜導航，而無需使用API我嘗試這一點，但沒有完成，所以我使用的API的任何方法，......你還可以使用抽屜導航API此

來源

2017-04-19 04:43:26

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;

來源

2017-07-06 20:16:06

DrawerNavigator在本地做出反應不工作

回答

相關問題