Question

我希望“下一步”按钮在显示时不覆盖键盘。当我使用KeyboardAvoidingView时，IOS正常工作。但它在Android上的工作方式类似于AdjustPan。 manifest设置为AdjustResize。

我如何使其在Android上运行？

import React, { Component } from 'react';
import {
  Button, Text, Container, Content, Header, Left, Body, Right, Icon, Input, Form,
} from 'native-base';
import {
  StyleSheet, Dimensions, KeyboardAvoidingView, Platform,
} from 'react-native';


const { height } = Dimensions.get('window');
const titleTopMargin = height / 7.38;
const inputTopMargin = height / 12.3;
const nextButtonTopMargin = height / 6.246;

const styles = StyleSheet.create({
  headerStyle: {
    borderBottomWidth: 0,

  },
  headerViewsLeft: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    marginLeft: 23,
  },
  backButtonText: {

    fontSize: 16,
    color: '#666666',
  },
  titleText: {
    marginLeft: 60,

    fontSize: 18,
    color: '#333333',
    marginTop: titleTopMargin,
  },
  inputStyle: {
    marginTop: inputTopMargin,
    marginLeft: 59,
    marginRight: 59,

    color: '#333333',
    fontSize: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#666666',
  },
  nextButton: {
    marginTop: nextButtonTopMargin,
  },
});

class LoginEmailContainer extends Component {
  back = () => {
    const { navigation } = this.props;
    navigation.goBack();
  }


  render() {
    const { back } = this;
    return (
      <Container>
        <Header style={styles.headerStyle}>
          <Left style={styles.headerViewsLeft}>
            <Button iconLeft onPress={() => back()} transparent>
              <Text style={styles.backButtonText}>back</Text>
            </Button>
          </Left>
        </Header>
        <KeyboardAvoidingView
          behavior="padding"
          style={{ flex: 1 }}
        >
          <Content scrollEnabled bounces={false} style={{flex:1}}>

            <Text style={styles.titleText}>email</Text>
            <Form>
              <Input
                placeholder="example@gmail.com"
                placeholderColor="rgba(153, 153, 153, 0.55)"
                style={styles.inputStyle}
              />
            </Form>

            <Button style={styles.nextButton}>
              <Text>Next</Text>
            </Button>

          </Content>
        </KeyboardAvoidingView>
      </Container>
    );
  }
}

export default LoginEmailContainer;

我尝试null的{{1}}的{{1}}，但是没有用。我也尝试将behavior设置为-500，但这也不起作用。

https://snack.expo.io/rkXnqiXaV

我的代码不足。它不完全像我的应用程序。它的工作原理大致相同。

Answer 1

React Native文档说：

如果完全不提供行为支持，Android可能会表现得更好，而iOS相反。

我相信您正在使用反应导航库进行导航。 Keyboardavoidingview不考虑标题高度。因此，您需要将标头高度设置为偏移值。

keyboardVerticalOffset = {Header.HEIGHT + 20}

Answer 2

“ 调整大小”

活动的主窗口总是调整大小以为软   屏幕上的键盘。

“ adjustPan ”

活动的主窗口未调整大小以为软件留出空间   键盘。而是，窗口的内容会自动平移   这样键盘和用户就不会遮挡当前的焦点   总是可以看到他们在打字。这通常不太理想   而不是调整大小，因为用户可能需要关闭软键盘才能   到达并与窗口的遮盖部分互动。

您的要求将按以下方式工作：

<activity android:windowSoftInputMode="adjustResize"> </activity>

您需要在活动代码中添加android:name=".MainActivity"

KeyboardAvoidingView AdjustResize在Android中不起作用

2 个答案: