如何在抽屉导航的底部对齐抽屉项目？

Question

我正在使用抽屉式导航。我要将注销和设置按钮放在抽屉式导航的底部。我尝试使用marginTop，但没有用。我也尝试过position: 'aboslute' bottom: 0，但没有用。

代码：

<ScrollView>

          <View style={styles.usernameContainer}>
            <Text style={styles.username}>Ramesh Singh</Text>
            <Text style={styles.useremail}>ramesh@city-brokers</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/timeline.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>Home</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/timeline.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>Feed</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/groups.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>Leads</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/lists.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>Projects</Text>
          </View>

          <View style={styles.drawerItem}>
            <Image source={require('../../assets/images/people.png')} style={styles.drawerItemImage}/>
            <Text style={styles.drawerItemText}>My Team</Text>
          </View>

          <View style={styles.bottomDrawerItem}>
              <Image source={require('../../assets/images/people.png')} style={styles.drawerItemImage}/>
              <Text style={styles.drawerItemText}>Settings</Text>
          </View>

          <View style={styles.bottomDrawerItem2}>
              <Image source={require('../../assets/images/logout.png')} style={styles.drawerItemImage}/>
              <Text style={styles.drawerItemText}>Logout</Text>
          </View>

        </ScrollView>

CSS：

drawerItem: {
      marginLeft: 15, 
      marginTop: 25, 
      fontSize: 22, 
      fontWeight: '500', 
      color: 'black',
      flexDirection: 'row',
    },
    drawerItemImage: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    drawerItemText: {
      fontFamily: Fonts.SourceSansPro,
      fontSize: 18.7,
      fontWeight: "normal",
      fontStyle: "normal",
      lineHeight: 18.7,
      letterSpacing: 0.33,
      color: "#1d1d26",
      padding: 10,
      marginLeft: 25
    }

我想要什么：

上面的代码给我带来了什么？

Answer 1

尝试使用position：'absolute'样式属性，然后还使用style bottom：0并从滚动视图中删除设置和注销视图：

我在下面的代码中尝试过

<View style={styles.container}>
        <ScrollView>
          <View style={styles.usernameContainer}>
            <Text style={styles.username}>Ramesh Singh</Text>
            <Text style={styles.useremail}>ramesh@city-brokers</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>Home</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>Feed</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>Leads</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>Projects</Text>
          </View>

          <View style={styles.drawerItem}>
            <Text style={styles.drawerItemText}>My Team</Text>
          </View>

        </ScrollView>

          <View style={{ position: 'absolute', bottom: 0 }}>
            <View style={styles.bottomDrawerItem}>
              <Text style={styles.drawerItemText}>Settings</Text>
            </View>

            <View style={styles.bottomDrawerItem2}>
              <Text style={styles.drawerItemText}>Logout</Text>
            </View>
          </View>
      </View>

这是您的输出：