键盘在反应原生博览会上推动视图

Question

我正在使用 react native 和 Expo 开发应用程序，但我在 Android 上遇到了键盘问题。当键盘弹出时，它将视图向上推太多，导致标题在中间被剪切。在 iOS 上没问题。我想实现同样的行为..

我查看了文档，但它说 Android 会自动处理它。但它没有这样做：/

这是我的代码：

render() {
    const { erroLogin, logando } = this.props;

    return (
      <ImageBackground style={styles.container} source={backgroundImage}>
        <KeyboardAvoidingView 
          style={styles.keyboardViewContainer} 
          behavior={Platform.OS === 'ios' ? 'padding' : null}
        >
          <Text
            style={{
              fontFamily: 'roboto-bold',
              color: '#ffffff',
              fontSize: 48,
              marginBottom: 20.7 * 3,
            }}
          >
          Balad<Text style={{ fontFamily: 'roboto-light', color: '#ffffff', fontSize: 48 }}>APP</Text>
          </Text>

          <TextInput
            value={this.state.email}
            placeholder="Usuário"
            style={[styles.input, { marginBottom: 4 * 3 }]}
            placeholderTextColor="#828282"
            maxLength={255}
            autoCorrect={false}
            keyboardType="email-address"
            autoCapitalize="none"
            returnKeyType="done"
            underlineColorAndroid="transparent"
            onChangeText={text => this.setState({ email: text })}
          />

          <TextInput
            value={this.state.senha}
            placeholder="Senha"
            style={styles.input}
            placeholderTextColor="#828282"
            maxLength={255}
            autoCorrect={false}
            autoCapitalize="none"
            returnKeyType="done"
            secureTextEntry
            underlineColorAndroid="transparent"
            onChangeText={text => this.setState({ senha: text })}
          />

          <View style={styles.esqueceuView}>
            <TouchableOpacity onPress={this.esqueciMinhaSenha}>
              <Text style={styles.esqueceuSenha}>Esqueceu a senha?</Text>
            </TouchableOpacity>
          </View>

          <CustomCheckBox style={styles.continuarConectadoView} onValueChange={this.switch} value={this.state.continuarConectado}>
            <Text style={styles.continuarConectadoText}>Manter conectado</Text>
          </CustomCheckBox>

          <View style={{ height: 20 * 3, width: '80%' }}>
            <Button
              title="ACESSAR SISTEMA"
              onPress={() => this.fazerLogin()}
              titleStyle={styles.buttonText}
              buttonStyle={styles.button}
              loading={logando}
            />
          </View>
        </KeyboardAvoidingView>

        {erroLogin && (
          <View style={{ width: '80%', height: '10%', borderRadius: 1.7 * 3, marginTop: '5%' }}>
            <ErrorBox
              defaultMessage={
                erroLogin.response.status === 401
                  ? 'Email ou senha incorretos'
                  : 'Ops, houve um erro. Tente novamente'
              }
            />
          </View>
        )}

        <Text style={styles.versao}>{Constants.manifest.version}v</Text>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  keyboardViewContainer: {
    width: '100%', 
    alignItems: 'center'
  },
  input: {
    width: '80%',
    height: 16.7 * 3,
    borderRadius: 1.7 * 3,
    fontSize: 4.7 * 3,
    fontFamily: 'roboto-medium-500',
    backgroundColor: '#ffffff',
    paddingHorizontal: 6 * 3,
  },
  esqueceuView: {
    width: '80%',
  },
  esqueceuSenha: {
    fontFamily: 'roboto-medium-500',
    letterSpacing: 0,
    color: '#ffffff',
    fontSize: 5 * 3,
    marginTop: 8 * 3,
    marginBottom: 8 * 3,
  },
  buttonText: {
    fontFamily: 'roboto-medium-500',
    color: '#ffffff',
    fontSize: 4.7 * 3,
  },
  button: {
    borderRadius: 1.7 * 3,
    backgroundColor: '#de0059',
  },
  continuarConectadoView: {
    flexDirection: 'row',
    width: '80%'
    // justifyContent: 'space-between'
  },
  continuarConectadoText: {
    fontFamily: 'roboto-medium-500',
    letterSpacing: 0,
    color: '#ffffff',
    fontSize: 5 * 3,
    marginTop: 2 * 3,
    marginBottom: 8 * 3,
    marginLeft: 3 * 3
  },
  versao: {
    color: '#ffffff',
    fontFamily: 'roboto-regular',
    fontSize: 16,
    position: 'absolute',
    top: '90%'
  }
});

Answer 1

我在世博论坛上发布了这个问题，我得到了答案。

我所要做的就是将 KeyboardAvoidView 中的内容包装在一个 ScrollView 中，它就可以工作了。仍在试图弄清楚为什么这是必要的，因为文档没有说明任何内容。

无论如何，这里是答案的链接https://forums.expo.io/t/problems-with-keyboardavoidview/7799

我希望它可以帮助其他人。

Answer 2

SDK 37 目前还有另一种解决方法。 只需将此样式代码添加到屏幕的根视图即可：

{ minHeight: Math.round(windowHeight)) }

然后键盘不会调整视图大小。

import React from 'react';
import {
  StyleSheet, View, useWindowDimensions,
} from 'react-native';


export default function AvoidViewMoving() {
  const windowHeight = useWindowDimensions().height;

  return (
    <View
      style={[{ minHeight: Math.round(windowHeight) }]}
    >
      {/* Your stuff */}
    </View>
  );
}

这个想法不是我的。学分来自 Ksedline 的 GitHub 上的此评论： https://github.com/expo/expo/issues/7589#issuecomment-629863678

Answer 3

尝试将 KeyboardAvoidingView 中的所有内容包装在 ScrollView

中

 <KeyboardAvoidingView style={{ flex: 1}}
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        >

       <ScrollView>
    //your container view is here
       </ScrollView>

    </KeyboardAvoidingView>