react-native 中的 KeyboardAvoidingView keyboardVerticalOffset 错误

Question

我使用 keyboardVerticalOffset 在 react-native 的 KeyboardAvoidingView 中使用静态按钮。 但是

红色箭头表示意外行为。 如您所见，正在添加额外的空间，但它是一个白色区域。

这是我的代码。

const Code = () => {
  const emailInput = useRef(null);
  const birthInput = useRef(null)
  const scrollViewRef = useRef(null);

  const [email, setEmail] = useState<string>('');


  const scrollToEmail = () => {
// I want to scroll the y position of the scroll to the center where the TextInput's cursor is focused.
  };

  return (
    <SafeAreaView style={{ flex: 1}}>
      <KeyboardAvoidingView style={{flex: 1}} behavior={'height'} keyboardVerticalOffset={73 + 50}>
        <ScrollView keyboardShouldPersistTaps="always" ref={scrollViewRef}>
          
          <InputBox> <== height: 50
            <TextInput
              ref={emailInput}
              onFocus = {() => scrollToEmail()} 
          />
          </InputBox>
        
          <InputBox> <== height: 50
            <TextInput
              ref={birthInput}
              onFocus = {() => scrollToBirth()}
            />
          </InputBox>
        </ScrollView>
      </KeyboardAvoidingView>
      
      <View style={{position: 'absolute', bottom: 0, width: '100%'}}>
        <BottomBtn check={check} onPress={submit} text={`ok`} /> <== height: 73
      </View>

    </SafeAreaView>
  );
};

export default Code;

和<KeyboardAvoidingView behavior={'padding'} keyboardVerticalOffset={73}/> 不工作。键盘立即关闭。

我希望 Sticky 按钮和 TextInput 的空间完美匹配。我该怎么办？

Answer 1

我之前也在滚动视图上使用了带有高度的KeyboardAvoidingView，但得到了相同的结果。我的建议是尝试不同的behaviour，但我认为使用react-native-keyboard-aware-scroll-view 更好。它具有更多的属性，并且更易于使用。