Question

当我点击TextInput时，组件被挤压：

如何解决？

import React, { Component } from 'react';
import {Text, View, TouchableHighlight, ImageBackground, TextInput, Image, Picker} from 'react-native';
import {Button} from 'react-native-elements';

class Consulta extends Component{
constructor(props){
super(props);
this.state={
  ambiente:0,
  busca:''
}
}


  render(){
return(
  <View style={{flex:1, flexDirection:'row'}}>


    <View style={{flex:5}}>
      <ImageBackground style={{flex:1, width: null, height: null}} source={require('../img/bg.png')}>

        <View style={{flex:1, flexDirection:'row'}}>
          <View style={{flex:1}}></View>

          <View style={{flex:10, flexDirection:'column'}}>
            <View style={{flex:1}}></View>

            <View style={{flex:2, justifyContent:'center'}}>
              <Text style={{fontSize:50, color:'#484b4c'}}>CONSULTA DE FLORES</Text>
            </View>

            <View style={{flex:2, justifyContent:'center'}}>
              <Text style={{fontSize:20, color:'#484b4c', marginBottom:10}}>NOME OU CÓDIGO</Text>
              <TextInput
                style={{height:60, borderColor:'gray', borderWidth:1, backgroundColor:'white', borderRadius:10}}
                onChangeText={(text) => this.setState({busca: text})}
              />
            </View>

            <View style={{flex:5, justifyContent:'center', alignItems:'flex-start'}}>
              <View>
              <Text style={{fontSize:20, color:'#484b4c', marginBottom: 10}}>TIPO DE AMBIENTE</Text>
              </View>

              <View style={{flex:1, flexDirection:'row'}}>

              <View style={{flex:1}}>
                <TouchableHighlight style={{flex:1}}
                  onPress={() => this.props.navigation.navigate('Consulta')}>
                  <Image
                    style={{flex:1.1, width: null, height: null}}
                    source={require('../img/icone/ambiente1.png')}
                  />
                </TouchableHighlight>
                <View style={{alignItems:'center'}}>
                  <Text style={{fontSize:20}}>INTERNO</Text>
                </View>
              </View>

              <View style={{flex:1}}>
                <TouchableHighlight style={{flex:1}}
                  onPress={() => this.props.navigation.navigate('Consulta')}>
                  <Image
                    style={{flex:1.1, width: null, height: null}}
                    source={require('../img/icone/ambiente2.png')}
                  />
                </TouchableHighlight>
                <View style={{alignItems:'center'}}>
                  <Text style={{fontSize:20}}>EXTERNO</Text>
                </View>
              </View>

              <View style={{flex:1}}>
                <TouchableHighlight style={{flex:1}}
                  onPress={() => this.props.navigation.navigate('Consulta')}>
                  <Image
                    style={{flex:1.1, width: null, height: null}}
                    source={require('../img/icone/ambiente3.png')}
                  />
                </TouchableHighlight>
                <View style={{alignItems:'center'}}>
                  <Text style={{fontSize:20}}>INTERNO E EXTERNO</Text>
                </View>
              </View>

              </View>

            </View>

            <View style={{flex:3, flexDirection:'row'}}>

              <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
              <Button
                large
                backgroundColor='#d0e25f'
                buttonStyle={{borderRadius:20}}
                textStyle={{fontSize:40, color:'#383838'}}
                iconRight={{name:'search', type:'font-awesome', size:40, color:'#383838'}}
                title='PESQUISAR'
                onPress={() => this.props.navigation.navigate('Resultado', {busca: this.state.busca})}
              />
              </View>

            </View>

            <View style={{flex:1}}></View>
          </View>

          <View style={{flex:1}}></View>
        </View>

      </ImageBackground >
    </View>

    <View style={{flex:1}}>

      <View style={{flex:1}}>
        <TouchableHighlight style={{flex:1}}
          onPress={() => this.props.navigation.navigate('Consulta')}>
          <Image
            style={{flex:1, width: null, height: null}}
            source={require('../img/consultaOn.png')}
          />
        </TouchableHighlight>
      </View>

      <View style={{flex:1}}>
        <TouchableHighlight style={{flex:1}}
          onPress={() => this.props.navigation.navigate('FormaPagamento')}>
          <Image
            style={{flex:1, width: null, height: null}}
            source={require('../img/formaOff.png')}
          />
        </TouchableHighlight>
      </View>

      <View style={{flex:1}}>
        <TouchableHighlight style={{flex:1}}
          onPress={() => this.props.navigation.navigate('Organizacao')}>
          <Image
            style={{flex:1, width: null, height: null}}
            source={require('../img/organizacaoOff.png')}
          />
        </TouchableHighlight>
      </View>

      <View style={{flex:1}}>
        <TouchableHighlight style={{flex:1}}
          onPress={() => this.props.navigation.navigate('Horario')}>
          <Image
            style={{flex:1, width: null, height: null}}
            source={require('../img/horarioOff.png')}
          />
        </TouchableHighlight>
      </View>

    </View>

  </View>
);
}
}

export default Consulta;

Answer 1

您需要在组件中添加Keyboard Aware scrollview作为父包装，然后当屏幕上显示键盘时，视图不会挤压并自动向上滚动。

Answer 2

您可以在Android清单文件中将windowSoftInputMode设置为adjustPan。

<manifest>
  ...

  <application>
    ...

    <activity
      ...
      android:windowSoftInputMode="adjustPan">

来自adjustPan上的documentation：

活动的主窗口未调整大小以便为软键盘腾出空间。相反，窗口的内容会自动平移，以便键盘不会遮挡当前焦点，用户可以随时看到他们正在键入的内容。

Answer 3

如果您在世博会管理的项目中，那么您必须使用属性来避免此问题。只需按照给定的 3 个步骤操作即可：

转到您的 app.json 文件
在android部分下粘贴代码："softwareKeyboardLayoutMode": "pan" 在 android 文件夹中，您的 app.json 应如下所示： "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" }, "softwareKeyboardLayoutMode": "pan" },
重启你的应用服务器

键盘挤压组件

3 个答案: