Question

我有一个用于登录表单的 Web 视图，我希望在触发键盘时自动向上滚动而不向上推我的 Text 组件。有没有办法让组件忽略键盘，使其保留在键盘下方的底部，同时保留该行为？

以下是我尝试过的代码。它确实将视图向上推，我的文本组件保持在底部，但我的键盘上方有一个灰色框。

      <KeyboardAvoidingView
        style={{flex: 1}
        behavior={Platform.OS === 'ios' ? null : 'padding'}
        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : headerHeight - 10}> // if I do -200 it will remove the grey box but the view does not shift when the keyboard is toggled
        <ScrollView>
          <WebView
            automaticallyAdjustContentInsets={false}
            style={{flex: 1, alignSelf: 'stretch', width: Dimensions.get('window').width, height: Dimensions.get('window').height},}
            source={{ uri }}
          />
          <Text style={{position: 'absolute', left: 0, right: 0, textAlign: 'center', bottom: '5%', backgroundColor: 'white'},}>
            For more information:{' '}
            <Text
              style={{ color: 'blue' }}
              onPress={() =>
                Linking.openURL(redirectURI)
              }>
              Tap here!
            </Text>
          </Text>
        </ScrollView>
      </KeyboardAvoidingView>

我该如何解决这个问题？

Answer 1

您是否测试过将 KeyboardAvoidingView 放在 ScrollView 中？

Android 上的 KeyboardAvoidingView 在键盘上方创建一个灰色框

1 个答案: