小屏幕底部的按钮显示在另一个内容上方

Question

我有以下情况：屏幕布局如下：

<ScreenContainer>
  <View style={styles.settings}>
    <Section sectionTitle="Update account">
      <ProfileNavigationItem
        title={`${user.firstName || ''} ${user.lastName || ''}`}
        subtitle={user.phone}
        subtitleStyle={styles.profilePhoneNumber}
        leftAvatar={<Avatar size="medium" img={user.avatar} />}
        onPress={() => navigation.navigate('EditProfile')}
      />

      <ProfileNavigationItem
        title="Update password"
        onPress={() => navigation.navigate('ChangePassword')}
      />
    </Section>

    <Section sectionTitle="Manage payments">
      <ProfileNavigationItem
        title="Purchase history"
        onPress={() => navigation.navigate('PurchaseHistory')}
      />

      <ProfileNavigationItem
        title="Manage subscription"
        onPress={() => navigation.navigate('Subscriptions')}
      />
      <ProfileNavigationItem
        title="Change payment method"
        onPress={() => navigation.navigate('AddCard')}
      />
    </Section>

    <Section sectionTitle="In case of trouble you can contact out support">
      <ProfileNavigationItem title="Contact support" onPress={mailToSupport} />
    </Section>
  </View>

  <View>
    <Button
      title="Sign out"
      containerStyle={styles.signOutButton}
      onPress={() => dispatch(logout())}
      loading={isLoading}
    />
  </View>
</ScreenContainer>

const styles = StyleSheet.create({
  settings: {
    flex: 1,
    paddingHorizontal: '7%',
    backgroundColor: backgroundColors.white,
  },
  profilePhoneNumber: {
    color: 'grey',
    marginTop: '1%',
  },
  signOutButton: {
    marginBottom: '5%',
    marginHorizontal: '15%',
  },
});

这是屏幕容器的代码：

const ScreenContainer = ({ children, ...props }: Props) => {
  return (
    <SafeAreaView style={styles.screenContainer} {...props}>
      {children}
    </SafeAreaView>
  );
};

如您所见，我试图将Sign Out按钮放在屏幕底部。但是，当我在小型设备上运行该应用程序时，我遇到了一个问题，即<View style={styles.settings}>标签内的内容比预期的占据更多的位置，并且按钮显示在其上方。因此，它看起来像这样：

我可能知道，我应该在此处放置scrollview，但是在这种情况下，大屏幕上的退出按钮不会位于屏幕底部。因此，您可以帮助我将“退出”按钮绑定到屏幕底部吗，即使它位于滚动视图内部。我将不胜感激。预先感谢！