需要在导航抽屉中显示可扩展列表视图 [英] Need to show Expandable list view inside navigation drawer

问题描述

我是一名Android应用程序开发人员.我已经开始研究React-Native.我找不到在导航抽屉中显示可扩展列表的方法.如果可以使用此功能，则建议一个库.

navigationOptions 无法提供列表(请参见下面的代码).

我想显示可扩展视图，如项目4

我的代码是:-

I am an Android Application Developer. I have started working on React-Native. I am unable to find a way to show expandable list inside navigation drawer. Suggest a library if this functionality can be done in that.

navigationOptions does not have a way to provide a list (refer code below).

I want to show expandable view like item 4

My Code is :-

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;

推荐答案

反应导航目前不支持抽屉式导航器中的可折叠菜单.

react-navigation does not, at this time, support a collapsible menu in the drawer navigator.

但是，您可以通过向导航器提供自己的 contentComponent 来实现自己的实现:

You can, however, implement your own, by supplying your own contentComponent to the navigator:

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

const MyDrawer = (props) => ...

有关更多信息，请参见文档.

See the documentation for more information.

您可以使用 react-native-collapsible 之类的方法来达到以下效果:可折叠菜单本身.

You can use something like react-native-collapsible to achieve the effect of the collapsible menu itself.

这篇关于需要在导航抽屉中显示可扩展列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！