내비게이션 서랍 안의 확장 가능한 목록보기

Question

나는 Android 애플리케이션 개발자입니다. 저는 React-Native에서 일하기 시작했습니다. 내비게이션 창 안에 확장 가능한 목록을 표시하는 방법을 찾을 수 없습니다. 이 기능을 라이브러리에서 수행 할 수있는 경우 라이브러리를 제안하십시오.

navigationOptions에는 목록을 제공하는 방법이 없습니다 (아래 코드 참조).

나는 내 코드 4

항목과 같은 확장보기를 표시하려면 : -

import {DrawerNavigator} from 'react-navigation'; 
import React, {Component} from 'react'; 
import { 
    Platform, 
    StyleSheet, 
    Text, 
    Image, 
    View, 
    TouchableHighlight 
} from 'react-native'; 

import Screen1 from './screen/Screen1' 
import Screen2 from './screen/Screen2' 
const util = require('util'); 

class MyHomeScreen extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     headertitle: 'ffffff' 
    }; 
    } 

    componentWillReceiveProps(nextProps) { 
    navigationOptions = { 
     title: this.nextProps.headertitle 
    }; 
    } 

    static navigationOptions = { 
    drawerLabel: 'Home', 
    drawerIcon: ({tintColor}) => (
     <Image 
     source={require('./images/document.png')} 
     style={[ 
     styles.icon, { 
     tintColor: tintColor 
     } 
    ]}/>), 
    title: 'NIIT' 
    }; 

    render() { 

    return (<Screen1/>); 
    } 
} 

class MyNotificationsScreen extends React.Component { 
    static navigationOptions = { 
    drawerLabel: 'Notifications', 
    drawerIcon: ({tintColor}) => (<Image source={require('./images/smartphone.png')} style={[styles.icon]}/>), 
    title: 'Gnome' 
    }; 

    render() { 
    return (<Screen2/>); 
    } 
} 

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

const DrawerScreen = DrawerNavigator({ 
    Screen1: { 
    screen: MyHomeScreen 
    }, 
    Screen2: { 
    screen: MyNotificationsScreen 
    } 
}, {headerMode: 'none'}) 

export default DrawerScreen; 

Answer 1

반응-탐색,이 시간에, 서랍 탐색기의 축소 메뉴를 지원하지 않습니다.

당신은, 그러나, 자신의 contentComponent 네비게이터에 공급함으로써, 자신을 구현할 수 있습니다

const DrawerScreen = DrawerNavigator({ 
    Screen1: { 
    screen: MyHomeScreen 
    }, 
    Screen2: { 
    screen: MyNotificationsScreen 
    } 
}, { 
    headerMode: 'none', 
    contentComponent: MyDrawer 
}) 

const MyDrawer = (props) => ... 

자세한 내용은 the documentation를 참조하십시오.

접을 수있는 메뉴 자체의 효과를 얻으려면 react-native-collapsible과 같은 것을 사용할 수 있습니다.