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

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' 样式属性，然后也使用样式 bottom: 0 并从 ScrollView 中删除设置和注销 View :

我试过下面的代码

<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>

这是你的输出: