React Native 抽屉导航自定义页脚

Question

我有一个抽屉导航，我试图在底部放置一个页脚，其中包含其他信息（应用程序版本和注销 link）..

这是我的导航容器：

      <NavigationContainer style={styles.drawer}>
    <Drawer.Navigator style={styles.drawer} drawerContent={props => <CustomDrawerContent {...props} />}>

      <Drawer.Screen name="Home" component={Home}
        options={{
          drawerIcon: ({ focused, size }) => (
            <Image source={require('./assets/icons/sidemenu-icon-account.png')} style={[{ height: 25, width: 25 }]} />
          )
        }} />

      <Drawer.Screen name="LoginScreen" component={LoginScreen}
        options={{
          drawerIcon: ({ focused, size }) => (
            <Image source={require('./assets/icons/sidemenu-icon-account.png')} style={[{ height: 25, width: 25 }]} />
          )
        }} />
    </Drawer.Navigator>
  </NavigationContainer>);

这是自定义内容：

    function CustomDrawerContent(props) {
  return (
    
    <DrawerContentScrollView style={styles.drawer}  {...props}>
      <View style={styles.logoContainer}>
        <Image source={require("./assets/logo.png")} style={{ height: "100%", width: "100%", resizeMode: "contain" }} />
      </View>

      <SafeAreaView style={styles.container}>
        <View style={{flex: 1 }}>
              <DrawerItemList {...props} />
        </View>
        <TouchableOpacity style={{backgroundColor: 'red', flexDirection: 'row', alignItems: 'center'}}>
              <Text>Log Out</Text>
        </TouchableOpacity>
        </SafeAreaView>
      </DrawerContentScrollView>
      
  );
}

如何将注销推出link固定在底部？

样式：

 const styles = StyleSheet.create({
  img: {
    height: 40,
    width: 40,
    marginTop: 6,
    justifyContent: 'center',
    textAlignVertical: 'center',
  },

  logout : {
    backgroundColor: 'red' ,
    bottom: 0,
    position: 'absolute'
  },

  logoContainer: {
    height: 140,
    width: "80%",
    marginTop: 20,
    marginBottom: 20,
    alignSelf: "center",
  },
  drawer: {
    backgroundColor: 'yellow',
    flex:1

  },
  labelBottom : {
    position: 'relative',
  bottom:0
  },

  redBottom: {
  },
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.red,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },

Answer 1

您可以对 TouchableOpacity 使用 marginTop: 'auto' 样式，对滚动视图也可以使用 contentContainerStyle

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView contentContainerStyle={styles.drawer} {...props}>
 <View style={styles.logoContainer}>
        <Image source={require("./assets/logo.png")} style={{ height: "100%", width: "100%", resizeMode: "contain" }} />
      </View>
      <SafeAreaView style={{flex:1}}>
        <View>
          <DrawerItemList {...props} />
        </View>
        <View style={{ marginTop: 'auto' }}>
        <TouchableOpacity
          style={{
            backgroundColor: 'red',
            flexDirection: 'row',

          }}>
          <Text>Log Out</Text>
        </TouchableOpacity>
         </View>
      </SafeAreaView>
    </DrawerContentScrollView>
  );
}

Answer 2

我通过将 DrawerComponent 的所有内容包装在一个 View 元素中，然后在根 View 元素的样式属性中添加 height: '100%' 来解决这个问题。最后添加 marginTop: 'auto' 会将 FooterComponent 推到底部（或者您可以使用 {position: 'absolute', bottom: 0} 作为 FooterComponent 的样式属性）。

<View style={{height: '100%'}}>
  <HeaderComponent />
  <DrawerItems {...props} />
  <View style={{marginTop: 'auto'}}>
    <FooterComponent />
  </View>
</View>

Answer 3

您可以使用 contentContainerStyle:

而不是 style 属性

<DrawerContentScrollView
   ...
   contentContainerStyle={styles.drawerContentContainer}
/>

虽然样式是这样的：

drawerContentContainer: {justifyContent: 'space-between', flex: 1},

React Native 抽屉导航自定义页脚

ReactNative drawerNavigation custom footer

navigation-drawer

react-native