DrawerNavigator 내가 네이티브 반응에 drawernavigator을 구현하기 위해 노력하고

Question

작동하지 네이티브 반작용 ...하지만 난 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를 사용하지 않고 서랍 네비게이터을 적용 할 수있는 방법은 ... 당신이

Answer 3

https://snack.expo.io/SJTS5z24Z

의 서랍 네비게이터 API를 사용하므로이 생각하지

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;