ReactNative：在鍵盤和評論框輸入字段之間獲取空白

Question

我在鍵盤和輸入框之間出現空白。 我在我的代碼中使用了 KeyBoardAvoiding 視圖。

這是一段代碼：

const [isKeyboardVisible, setKeyboardVisible] = useState(false);
 const [offsetValue, setOffsetValue] = useState(0);
 useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
      setKeyboardVisible(true);
    });
    const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
      setKeyboardVisible(false);
    });
    if (appState === "active") {
      isKeyboardVisible && Keyboard.dismiss();
    }
    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

useEffect(() => {
    if (isKeyboardVisible) {
      setOffsetValue(0);
    } else {
      setOffsetValue(80);
    }
  }, [isKeyboardVisible]);

 <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            keyboardVerticalOffset={Platform.OS === "ios" ? offsetValue : 0}
          >
            <ScrollView
              contentContainerStyle={styles.scrollViewContainer}
              alwaysBounceVertical={false}
              keyboardShouldPersistTaps={"handled"}
            >
              <View style={styles.chatInputBoxWrapper}>
                <AvyCommentLinearInput
                  inputRef={props.setInputRef}
                  value={props.inputValue}
                  isVideoCaptureEnabled={true}
                  imageUrl={""}
                  onSubmit={(value) => props.onChatSubmit(value)}
                />
              </View>
            </ScrollView>
          </KeyboardAvoidingView>

export default StyleSheet.create({
  scrollViewStyle: {
    marginHorizontal: 16,
    borderRadius: 4,
    marginBottom: 8,
    marginTop: 8,
  },
  chatInputBoxWrapper: {
    ...shadowStyle,
    flex: 1,
  },
  scrollViewContainer: { flexGrow: 1 },
});

我面臨的問題的視頻鏈接： https://www.dropbox.com/s/6ydwxhaq06dpfaf/RPReplay_Final1674132226.MP4?dl=0

任何幫助，將不勝感激！！！

Answer 1

我的建議 - 使用 React Native 避免 SoftInput https://mateusz1913.github.io/react-native-avoid-softinput/

例子很多https://github.com/mateusz1913/react-native-avoid-softinput/tree/main/packages/app/src/screens