将 Drawer 元素放置在菜单底部

问题描述

如何将菜单点定位在屏幕的下边缘?最好的解决方案是，如果您可以简单地更改每个元素的导航选项的样式.

how is it possible to position the menu point at the lower edge of the screen?The best solution would be if you could simply change the style of the navigation options for each element.

这是我的应用导航器:

    const AppNavigator = createDrawerNavigator(
      {
        Einkaufsliste: {
          screen: MainScreen,
          navigationOptions: {
            drawerIcon: <Icon name="shopping-cart" />
          }
        },
        Bearbeiten: {
          screen: BasketEditScreen,
          navigationOptions: {
            drawerIcon: <Icon name="edit" />
          }
        }
      },

      {
        contentComponent: CustomDrawerComponent
      }
    );

谢谢！

推荐答案

根据 react-navigation 你可以创建一个自定义的 Drawer navigator，所以你需要创建一个与他们的例子类似的东西:

According to react-navigation you can make a custom Drawer navigator, so what you need is to create a similar thing to their example:

import { DrawerItems, SafeAreaView } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
  </ScrollView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

所以在你的情况下你想做的是:

So in your case what you want to do is:

    import { DrawerItems, SafeAreaView } from 'react-navigation';

    const CustomDrawerContentComponent = (props) => (
      <ScrollView>
        <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
        <View style={{flex: 1 }}>
              <DrawerItems {...props} />
        </View>
        <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}}>
              //Your pencil icon here with correct margin to the right
              <Text>Bearbeiten</Text>
        </TouchableOpacity>
        </SafeAreaView>
      </ScrollView>
    );

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
    });

这篇关于将 Drawer 元素放置在菜单底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！