Блог

По умолчанию

при открытии клавиатуры

 function PINInsert({ navigation }){
  clearText = () => {
    _textInput.setNativeProps({text: ''});
  }

  var onoff = 0
  hideText = () => {
    if(onoff == 0){
      _textInput.setNativeProps({secureTextEntry: false});
      onoff = 1;
    }else{
      _textInput.setNativeProps({secureTextEntry: true})
      onoff = 0;
    }
  }

  return(
    <KeyboardAvoidingView style={styles.container0}>
      <View style={PINInsertstyles.div0}>
        <View style={{
          alignContent: "center",
          justifyContent: "center"}}>
          <Image style={PINInsertstyles.flag} source={require('./assets/en.png')} />
        </View>
        <View style={{
          alignContent: "center",
          justifyContent: "center"}}>
          <Image style={PINInsertstyles.flag} source={require('./assets/br.png')} />
        </View>
        </View>
      <View style={PINInsertstyles.div1}>
        <View style={{
          height: 100,
          width: 100,   
          alignItems: "center",
          justifyContent: "center"
        }}>
          <Image style={PINInsertstyles.logo} source={require('./assets/headphone.png')} />
        </View>
        <View>
          <Text style={{fontSize: 40}}>SoundFly</Text>
        </View>
      </View>
      <View style={PINInsertstyles.div2}>
        <View style={{flexDirection: "row", justifyContent: "center", alignItems: 'center'}}>
          <TextInput
              ref={component => _textInput = component}
              style={{
                height: 40,
                width: 200,
                margin: 5,
                marginTop: 20,
                borderWidth: 1,
                borderColor: '#ccc',
                fontSize: 20,
                backgroundColor: '#fff'
              }}
              maxLength={6}
              secureTextEntry={true}
              placeholder="PIN"
            />
            <TouchableOpacity onPress={hideText} >
              <Icon name="eye" size={20} />
            </TouchableOpacity>
        </View>
        <View style={{flexDirection: 'row'}}>
          <TouchableOpacity onPress={clearText}
            style={{margin: 5, marginTop: 20, backgroundColor: 'red', padding: 5}}
            >
            <Text style={{justifyContent: 'center', alignItems: 'center', fontSize: 20}}>Clear text</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() =>
            navigation.navigate('banner')}
            style={{margin: 5, marginTop: 20, backgroundColor: 'purple', padding: 5}}
          >
            <Text style={{justifyContent: 'center', alignItems: 'center', fontSize: 20}}>Buscar</Text>
          </TouchableOpacity>
        </View>
        <View style= {{height: 50}}></View>
      </View>
    </KeyboardAvoidingView>
  );
};
  

 const PINInsertstyles = StyleSheet.create({
  div0: {
    flex: 0.4,
    backgroundColor: '#00FFEC',
    flexDirection: "row-reverse",
    alignItems: "flex-start",
  },
  div1: {
    flex: 0.6,
    backgroundColor: '#00DCCC',    
    alignItems: "center",
    // justifyContent: "center"
  },
  div2: {
    flex: 1,
    backgroundColor: '#00BFBF',
    alignItems: "center",
    // justifyContent: "center"
  },
  flag: {
    height: 50,
    width: 80,
    margin: 5
  },
  logo:{
    height: 80,
    width: 80,
    margin: 10,
    alignContent: "center",
    justifyContent: "center",
    alignItems: "center"
  }
})
  

Я хочу, чтобы «При открытии клавиатуры целые представления отображались без какого-либо представления, уменьшающего размер самого себя».
Я перепробовал много примеров, но мой старт действительно отличается по сравнению с ними, потому что большинство примеров начинает жаловаться на содержимое обложек клавиатуры, но мой просто отправляет просмотры вверх, но изменяет их размер.

Что я здесь делаю не так?

Вам нужно получить размер окна с помощью

 const windowHeight = Dimensions.get('window').height;
  

А затем вставьте justify-content: flex-end в container0.
Добавьте представление прямо внутри KeyboardAvoidingView и установите minHeight на высоту окна.