react-native - react-native 中的 KeyboardAvoidingView keyboardVerticalOffset 错误

Question

我曾经在react-nativekeyboardVerticalOffset中使用静态按钮。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 的空间完美契合。我应该怎么办？

标签： react-nativereact-native-androidscrollviewtextinputreact-functional-component

Answer 1

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