将抽屉元素放置在菜单底部答案

【问题标题】：Position Drawer element at the bottom of the menu将抽屉元素放置在菜单底部
【发布时间】：2019-02-02 14:57:02
【问题描述】：

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

这是我的应用导航器：

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

      {
        contentComponent: CustomDrawerComponent
      }
    );

谢谢！

【问题讨论】：

你试过bottom: 0vh; position: absolute;吗？
那么你想让抽屉里的最后一个元素在底部吗？我理解正确吗？
@MichaelOstrovsky 是的，没错
@stever 不，但是我必须在哪里写呢？进入导航选项？

标签： javascript react-native react-navigation

【解决方案1】：

根据react-navigation，您可以制作自定义抽屉导航器，因此您需要创建与他们的示例类似的东西：

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,
  },
});

所以在你的情况下你想要做的是：

    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,
      },
    });

【讨论】：