Notwendigkeit zu zeigen Expandable Listenansicht innerhalb der Navigation Schublade

Question

Ich bin ein Android Application Developer. Ich habe angefangen, an React-Native zu arbeiten. Ich finde keine Möglichkeit, die erweiterbare Liste in der Navigationsleiste anzuzeigen. Schlagen Sie eine Bibliothek vor, wenn diese Funktion in diesem Fall ausgeführt werden kann.

navigationOptions hat keine Möglichkeit, eine Liste zur Verfügung zu stellen (siehe Code unten).

Ich mag wie Artikel erweiterbar Ansicht zeigen, 4

mein Code: -

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

reagieren-Navigation nicht zu diesem Zeitpunkt, ein zusammenklappbares Menü in der Schublade Navigator unterstützen.

können Sie jedoch implementieren Ihre eigenen, indem Sie Ihre eigene contentComponent zum Navigator liefert:

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

const MyDrawer = (props) => ... 

the documentation Siehe für weitere Informationen.

Sie können etwas wie react-native-collapsible verwenden, um den Effekt des zusammenklappbaren Menüs selbst zu erzielen.