本机反应避免键盘但保持标题固定在屏幕上

时间：2021-05-08 16:11:53

标签： react-native keyboard

基本上我有一个超过 16 个文本字段的屏幕，我需要键盘不要覆盖选定的文本字段。

并且如果选定的文本字段未被键盘覆盖，请不要将其向上推。 （这已经有效）

<块引用>

我遇到的大问题是我有一个需要在屏幕上固定的标题 (styles.headerBackground) 和 (styles.contactsOptions) 需要固定。

我该如何解决这个问题？

下面分别放渲染代码和样式代码

渲染代码：

upstream leantime {
        server  127.0.0.1:8881;
}

server {
       listen 80;
       gzip on;
       gzip_types application/javascript image/* text/css;
       gunzip on;

    server_name lt.tastysites.dev;


    location / {
            root /var/www/html/public;
        proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-Host $host:$server_port;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://leantime;
    }

        listen 443 http2 ssl; # managed by Certbot
        lets encrypt certs here.....

}

样式代码：

<KeyboardAwareScrollView style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <>
          <View style={styles.appHeaderPadding}>
            {loading ? (
              <View
                style={{
                  paddingVertical: 20,
                }}>
                <ActivityIndicator animating size="large" />
              </View>
            ) : (
              <>
                <View
                  style={[
                    styles.headerBackground,
                    name.length >= 26 && { height: wp('38%') },
                  ]}>
                  <View style={styles.header}>
                    <TouchableOpacity
                      onPress={() => navigateAnother()}
                      style={styles.arrowBackButton}>
                      <ArrowBack width="12" height="20" />
                    </TouchableOpacity>
                    <View style={styles.headerBar}>
                      <Image
                        style={styles.photo_contact}
                        source={{
                          uri:
                            photo ||
                            'https://mozaik-public.s3-sa-east-1.amazonaws.com/default/profile-user.png',
                        }}
                      />
                      <View style={styles.viewName}>
                        {editable ? (
                          <TextInput
                            editable={editable}
                            placeholder="Nome"
                            placeholderTextColor="#fff"
                            multiline
                            value={contactData.contact_name || name}
                            style={
                              editable
                                ? styles.textInputEditable
                                : styles.textInputEditable
                            }
                            onChangeText={text => {
                              contactData.contact_name = text;
                              setName(text);
                            }}
                          />
                        ) : (
                          <Text
                            numberOfLines={1}
                            style={styles.textInputEditable}>
                            {contactData.contact_name || name}
                          </Text>
                        )}
                      </View>
                    </View>
                  </View>
                </View>

                <View style={styles.contactsOptions}>
                  <View style={styles.contactOption}>
                    <Whatsapp whidth="31.5" height="31.5" />
                  </View>
                  <View style={styles.contactOption}>
                    <EmailL whidth="30" height="24" />
                  </View>
                  <View style={styles.contactOption}>
                    <Phone whidth="50" height="50" />
                  </View>
                </View>

                <View style={styles.infoContainer}>
                  <ScrollView keyboardDismissMode="interactive">
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Mobile:</Text>
                      {editable && (
                        <>
                          <View>
                            <TextInputMask
                              type="cel-phone"
                              options={{
                                maskType: 'BRL',
                                withDDD: true,
                                dddMask: '(99) ',
                              }}
                              multiline={true}
                              editable={editable}
                              value={contactData.contact_phone || newNumber}
                              onChangeText={text => {
                                setNewNumber(text);
                                contactData.contact_phone = text;
                                contactData.contact_phones = [
                                  ...telephones,
                                  text,
                                ];
                              }}
                              onBlur={() => addNumberInArray()}
                              onKeyPress={() => setIsEditingNumber(true)}
                              style={
                                editable
                                  ? styles.infoInputEditableNumber
                                  : styles.infoInput
                              }
                            />
                          </View>
                        </>
                      )}
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>E-mail:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        keyboardType="email-address"
                        autoCapitalize="none"
                        autoCorrect={false}
                        value={contactData.contact_email || email}
                        onChangeText={text => {
                          contactData.contact_email = text;
                          setEmail(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>CPF:</Text>
                      <TextInputMask
                        type={'cpf'}
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_cpf || cpf}
                        keyboardType="numeric"
                        onChangeText={text => {
                          contactData.contact_cpf = text;
                          setCPF(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Data de Nascimento:</Text>
                      <TextInputMask
                        type={'datetime'}
                        options={{
                          format: 'DD/MM/YYYY',
                        }}
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_birth_date || birthDate}
                        onChangeText={text => {
                          contactData.contact_birth_date = text;
                          setBirthDate(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>ID Externo:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        value={contactData.id_externo || idExtern}
                        onChangeText={text => {
                          contactData.id_externo = text;
                          setIdExtern(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>

                    {contactData.corporativo && (
                      <>
                        <View style={styles.infoRow}>
                          <Text style={styles.infoTitle}>CNPJ:</Text>
                          <TextInputMask
                            type="cnpj"
                            multiline={true}
                            editable={editable}
                            value={contactData.cnpj || cnpj}
                            onChangeText={text => {
                              contactData.cnpj = text;
                              setCnpj(text);
                            }}
                            style={
                              editable
                                ? styles.infoInputEditable
                                : styles.infoInput
                            }
                          />
                        </View>

                        <View style={styles.infoRow}>
                          <Text style={styles.infoTitle}>Razão Social:</Text>
                          <TextInput
                            multiline={true}
                            editable={editable}
                            value={contactData.razao_social || razaoSocial}
                            onChangeText={text => {
                              contactData.razao_social = text;
                              setRazaoSocial(text);
                            }}
                            style={
                              editable
                                ? styles.infoInputEditable
                                : styles.infoInput
                            }
                          />
                        </View>

                        <View style={styles.infoRow}>
                          <Text style={styles.infoTitle}>Nome Fantasia:</Text>
                          <TextInput
                            multiline={true}
                            editable={editable}
                            value={contactData.nome_fantasia || nomeFantasia}
                            onChangeText={text => {
                              contactData.nome_fantasia = text;
                              setNomeFantasia(text);
                            }}
                            style={
                              editable
                                ? styles.infoInputEditable
                                : styles.infoInput
                            }
                          />
                        </View>
                      </>
                    )}

                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>CEP:</Text>
                      <TextInputMask
                        type="zip-code"
                        multiline={true}
                        editable={editable}
                        value={cep}
                        onChangeText={text => {
                          setCEP(text);
                          cepMask(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Endereço:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_address || address}
                        onChangeText={text => {
                          contactData.contact_address = text;
                          setAddress(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Número:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_address_number || number}
                        onChangeText={text => {
                          contactData.contact_address_number = text;
                          setNumber(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Complemento:</Text>
                      <TextInput
                        // multiline={true}
                        editable={editable}
                        value={
                          contactData.contact_address_complement || complement
                        }
                        onChangeText={text => {
                          contactData.contact_address_complement = text;
                          setComplement(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Cidade:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_city || city}
                        onChangeText={text => {
                          contactData.contact_city = text;
                          setCity(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Estado:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_state || state}
                        onChangeText={text => {
                          contactData.contact_state = text;
                          setState(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Facebook:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_facebook || facebook}
                        onChangeText={text => {
                          contactData.contact_facebook = text;
                          setFacebook(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>
                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Instagram:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_instagram || instagram}
                        onChangeText={text => {
                          contactData.contact_instagram = text;
                          setInstagram(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>

                    <View style={styles.infoRow}>
                      <Text style={styles.infoTitle}>Twitter:</Text>
                      <TextInput
                        multiline={true}
                        editable={editable}
                        value={contactData.contact_twitter || twitter}
                        onChangeText={text => {
                          contactData.contact_twitter = text;
                          setTwitter(text);
                        }}
                        style={
                          editable ? styles.infoInputEditable : styles.infoInput
                        }
                      />
                    </View>

                    <View style={styles.infoRow}>
                      <View style={{ marginTop: 15, marginBottom: 15 }}>
                        <Text style={styles.infoTitleWildCards}>
                          WildCards:
                        </Text>
                        <View style={styles.infoNumber}>
                          <>
                            <FlatList
                              data={contactData.wildcard_fields}
                              keyExtractor={item => item.id}
                              renderItem={({ item: data, index }) => (
                                <View
                                  style={{
                                    paddingTop: 10,
                                    paddingBottom: 10,
                                    flexDirection: 'row',
                                    alignSelf: 'center',
                                    borderColor: '#E4E4E4',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    borderBottomWidth: 1,
                                  }}>
                                  <View>
                                    <TextInput
                                      style={
                                        editable
                                          ? styles.infoInputEditableWildcard
                                          : styles.infoInputWildcard
                                      }>
                                      {' '}
                                      {data.label}{' '}
                                    </TextInput>
                                  </View>
                                  <View>
                                    <TextInput
                                      style={
                                        editable
                                          ? styles.infoInputEditableWildcard
                                          : styles.infoInputWildcard
                                      }>
                                      {data.value}{' '}
                                    </TextInput>
                                  </View>
                                  {editable && (
                                    // <View style={{ width: wp('5%') }}>
                                    <TouchableOpacity
                                      style={{
                                        padding: 2,
                                        alignSelf: 'center',
                                        alignItems: 'center',
                                        marginTop: 3,
                                      }}
                                      onPress={() =>
                                        setWildcards(currentWildCard =>
                                          currentWildCard.filter(
                                            (d, i) => i !== index,
                                          ),
                                        )
                                      }>
                                      <IconX
                                        width="18"
                                        height="18"
                                        alignSelf="center"
                                      />
                                    </TouchableOpacity>
                                    // </View>
                                  )}
                                </View>
                              )}
                            />
                            <View style={styles.viewWCLabel}>
                              <View style={{ flexDirection: 'row' }}>
                                <TextInput
                                  onChangeText={setNewLabel}
                                  value={newLabel}
                                  onKeyPress={() => setIsEditingWildCard(true)}
                                  onBlur={() => addWildCardsInArray()}
                                  placeholder="Digite a Label"
                                  style={
                                    editable
                                      ? styles.infoInputEditableWildcard
                                      : styles.infoInputWildcard
                                  }
                                />

                                <TextInput
                                  onChangeText={setNewValue}
                                  value={newValue}
                                  // onKeyPress={() => setIsEditingWildCard(true)}
                                  onBlur={() => addWildCardsInArray()}
                                  placeholder="Digite o valor"
                                  style={
                                    editable
                                      ? styles.infoInputEditableWildcard
                                      : styles.infoInputWildcard
                                  }
                                />
                              </View>
                              <View style={{ width: wp('5%') }} />
                            </View>
                            {isEditingWildCard && (
                              <View style={styles.viewWCLabel}>
                                <View style={{ flexDirection: 'row' }}>
                                  <TextInput
                                    onChangeText={text => setNewLabel(text)}
                                    // value={newLabel}
                                    onBlur={() => addWildCardsInArray()}
                                    placeholder="Digite a Label"
                                    style={
                                      editable
                                        ? styles.infoInputEditableWildcard
                                        : styles.infoInputWildcard
                                    }
                                  />
                                </View>
                                <View style={styles.viewWildCards}>
                                  <TextInput
                                    onChangeText={value => setNewValue(value)}
                                    value={newValue}
                                    onBlur={() => addWildCardsInArray()}
                                    placeholder="Digite o valor"
                                    style={
                                      editable
                                        ? styles.infoInputEditableWildcard
                                        : styles.infoInputWildcard
                                    }
                                  />
                                </View>
                                <View style={{ width: wp('5%') }} />
                              </View>
                            )}
                          </>
                        </View>
                      </View>
                    </View>
                    {editable && (
                      <TouchableOpacity
                        style={styles.buttonSave}
                        onPress={() => setModalVisible(true)}>
                        <Text style={styles.textStyle}>Salvar</Text>
                      </TouchableOpacity>
                    )}
                  </ScrollView>
                </View>
              </>
            )}
          </View>
        </>
      </TouchableWithoutFeedback>
    </KeyboardAwareScrollView>

0 个答案:

没有答案
相关问题
最新问题