将 Drawer 元素放置在菜单底部

Question

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

这是我的应用程序导航器：

    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 navigator，所以你需要的是创建一个与他们的例子类似的东西：

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