React Native KeyboardAvoidingView 和 ScrollView 不会自动 marginTop

Question

所以我有这个布局。我将滚动视图设为蓝色背景，这样我就可以看到它的高度有多大。

我的目标是将此按钮放在页面的末尾。当键盘抬起时，它与按钮重叠，因此它将位于键盘下方。

这是屏幕代码：

<SafeAreaView style={styles.root}>
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior='padding'
        keyboardVerticalOffset={-200}>
        <ScrollView style={{ backgroundColor: 'blue', flex: 1 }}>
          <Header title='AVS¨ANDARE' goBack={() => props.navigation.goBack()} />
          <BgImage path={require('../../../assets/images/phone-city.png')} />
          <View style={styles.container}>
            <Text style={styles.title}>Från</Text>
            <TextInput
              ref={inputRef}
              placeholder='dit namn'
              autoCorrect={false}
              onSubmitEditing={() =>
                props.navigation.navigate('Person Selected')
              }
              returnKeyType='next'
              style={styles.textInput}
              placeholderTextColor={placeholderTextColor}
            />
            <Text style={styles.paragraph}>
              Skriv in vem du är så mormor vet vem träningsprogrammet kommer
              ifrån.
            </Text>
          </View>
          <NavButton
            style={styles.button}
            title='Nästa'
            onPress={() => props.navigation.navigate('Capture Image')}
          />
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>

这是屏幕样式：

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: colors.blue
  },
  container: {
    marginHorizontal: 20
  },
  title: {
    color: colors.white,
    fontSize: wp('15%')
  },
  textInput: {
    color: colors.white,
    fontSize: wp('15%'),
    lineHeight: 60,
    opacity: 0.5
  },
  paragraph: {
    color: colors.white,
    fontSize: wp('6%')
  },
  button: {
    marginHorizontal: 20,
    marginBottom: hp('6%'),
    alignSelf: 'flex-end'
  }
});

这些是导航按钮代码：

<View style={[styles.navButtonContainer, props.containerStyle]}>
      <TouchableOpacity
        style={[
          styles.navButton,
          props.style,
          { backgroundColor: dynamicBackgroundColor }
        ]}
        onPress={props.onPress}>
        <Text style={[styles.title, { color: dynamicColor }]}>
          {props.title}
        </Text>
        {DynamicIcon}
      </TouchableOpacity>
    </View>

这是导航按钮样式：

const styles = StyleSheet.create({
  navButtonContainer: {
    marginTop: 'auto'
  },
  navButton: {
    backgroundColor: colors.blue,
    marginLeft: 'auto',
    width: wp('45%'),
    height: wp('13%'),
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderRadius: 500,
    paddingHorizontal: wp('5%'),
    alignItems: 'center'
  },
  title: {
    color: colors.white,
    fontSize: wp('6%')
  }
});

所以，好吧。为什么marginTop: 'auto'不起作用，如何将按钮放在屏幕最底部的键盘下方？

问候。