Обложка React Native Keyboard Изображение в представлении при выборе ввода - PullRequest
Новая
       53

Обложка React Native Keyboard Изображение в представлении при выборе ввода

0 голосов
/ 05 августа 2020

Я пробовал KeyboardAvoidingView, Keyboard, react-native-keyboard-spacer, но все они продолжают закрывать изображение. Либо клавиатура закрывает изображение, либо она выталкивает все вверх, и внизу остается огромная пустота.

вот скриншот телефона с обычным вводом и когда он выбран: Print

Я использую genymotion с установленным Sansung Galaxy S8 для тестов.

Мой код со стилями: 

return (
    <>


      <View style={styles.container}>

        <Image
          style={styles.imagemlogo}
          source={require('../assets/LogoRed.png')}
        />

        <Image
          style={styles.imagemlogo2}
          source={require('../assets/Telecornos.png')}
        />

        <TextInput
          style={styles.logintext}
          placeholder="Nome de usuário"
          placeholderTextColor="#cdc9ca"
          keyboardType='email-address'
          onChangeText={text => setUser(text)}
          value={user}
        >
        </TextInput>


        <TextInput
          style={styles.logintext}
          placeholder="Senha"
          placeholderTextColor="#cdc9ca"
          secureTextEntry={true}
          onChangeText={text => setPass(text)}
          value={pass}
        >
        </TextInput>


        <TouchableOpacity
          onPress={logar}
          style={styles.botao}
        >
          <Text style={styles.texto}>Entrar</Text>
        </TouchableOpacity>



        <Text style={styles.cadastrese}>Ainda não é um corno?</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Cadastro')}
          style={styles.cadastre}>

          <Text style={styles.textocad}> Cadastre-se.</Text>
        </TouchableOpacity>

      </View>

    </>
  )
};

const styles = StyleSheet.create({

  container: {
    padding: 20,
    flex: 1,
    backgroundColor: '#222222',
    justifyContent: 'center',
    alignItems: 'center',
  },

  imagemlogo: {
    alignSelf: 'center',
    height: 200,
    width: 260,
    borderWidth: 1,
    marginTop: 20,
  },

  imagemlogo2: {
    flex: 1,
    width: 300,
    height: 300,
    resizeMode: 'contain'
  },

  logintext: {
    backgroundColor: "#454140",
    color: "white",
    width: 210,
    height: 40,
    borderRadius: 3,
    borderColor: 'black',
    borderWidth: 1,
    marginBottom: 4,
    textAlign: 'center',
    paddingHorizontal: 10
  },

  botao: {
    marginTop: 5,
    backgroundColor: '#992000',
    borderRadius: 3,
    alignItems: 'center',
    width: 210,
    height: 40,
    justifyContent: 'center'
  },

  texto: {
    color: "white",
    fontWeight: 'bold',
    textAlign: "center",
  },

  cadastrese: {
    color: '#cdc9ca',
    marginTop: 25
  },

  cadastre: {
    marginBottom: 20
  },

  textocad: {
    color: 'white',
    fontWeight: 'bold'
  },

});
...