菜单底部的位置抽屉元素

Question

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

这是我的App Navigator：

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

      {
        contentComponent: CustomDrawerComponent
      }
    );

谢谢！

Answer 1

根据react-navigation，您可以创建一个自定义的Drawer导航器，因此您需要创建与示例类似的东西：

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