Заголовок моего заголовка мерцает в реакции на реакцию, когда появляется клавиатура - PullRequest
Новая
       22

Заголовок моего заголовка мерцает в реакции на реакцию, когда появляется клавиатура

0 голосов
/ 21 марта 2020

это видео описывает мое проблемное видео https://gofile.io/?c=oTpNjA

, поэтому, когда textInput сфокусирован, заголовок заголовка и левое изображение немного сдвигаются со своих позиций, а затем возвращаются в нормальное состояние. для меня это происходит в каждом вложенном stackNavigator внутри MaterialBottomTabNavigator

Мой код

render () {return (

        value={this.state.address.title}
        onChangeText={title => this.setState({ address: { ...this.state.address, title: title, } })}
        placeholder={i18n.translations[I18nManager.isRTL].Title}
        autoCapitalize='none'
        onSubmitEditing={() => { this.secondTextInput.focus(); }}

      />


      <TouchableOpacity onPress={(e) => {

        this.onShow()
      }}>

        <TextInput
          style={styles.input}

          textAlign={I18nManager.isRTL ? 'right' : 'left'}
          value={this.getText(this.state.address.cityId)}
          onChangeText={cityId => this.setState({ address: { ...this.state.address, cityId: cityId, } })}
          placeholder='   cityId'
          autoCapitalize='none'
          editable={false}
        />
      </TouchableOpacity>

      <TextInput
        style={styles.input}
        textAlign={I18nManager.isRTL ? 'right' : 'left'}
        value={this.state.address.street}
        onChangeText={street => this.setState({ address: { ...this.state.address, street: street } })}
        placeholder={i18n.translations[I18nManager.isRTL].Street}
        autoCapitalize='none'
        ref={(input) => { this.secondTextInput = input; }}
        onSubmitEditing={() => { this.thirdTextInput.focus(); }}
      />

      <TextInput
        style={styles.input}
        textAlign={I18nManager.isRTL ? 'right' : 'left'}
        value={this.state.address.block}
        onChangeText={block => this.setState({ address: { ...this.state.address, block: block } })}
        placeholder={i18n.translations[I18nManager.isRTL].Block}
        autoCapitalize='none'
        ref={(input) => { this.thirdTextInput = input; }}
        onSubmitEditing={() => { this.forthTextInput.focus(); }}
      />

      <TextInput
        style={styles.input}
        textAlign={I18nManager.isRTL ? 'right' : 'left'}
        value={this.state.address.jadah}
        onChangeText={jadah => this.setState({ address: { ...this.state.address, jadah: jadah } })}
        placeholder={i18n.translations[I18nManager.isRTL].Jadah}
        autoCapitalize='none'
        ref={(input) => { this.forthTextInput = input; }}
        onSubmitEditing={() => { this.fifthTextInput.focus(); }}
      />
      <TextInput
        style={styles.input}
        textAlign={I18nManager.isRTL ? 'right' : 'left'}
        value={this.state.address.buidling}
        onChangeText={buidling => this.setState({ address: { ...this.state.address, buidling: buidling } })}
        placeholder={i18n.translations[I18nManager.isRTL].Building}
        autoCapitalize='none'
        ref={(input) => { this.fifthTextInput = input; }}
        onSubmitEditing={() => { this.sixthTextInput.focus(); }}
      />

      <TextInput
        style={styles.input}
        textAlign={I18nManager.isRTL ? 'right' : 'left'}
        value={this.state.address.floor}
        onChangeText={floor => this.setState({ address: { ...this.state.address, floor: floor } })}
        placeholder={i18n.translations[I18nManager.isRTL].Floor}
        autoCapitalize='none'
        ref={(input) => { this.sixthTextInput = input; }}
      />

      <TouchableOpacity style={styles.location} onPress={() => {
        this.GoToLocation()
      }}>
        <Text style={styles.locationText}>{i18n.translations[I18nManager.isRTL].Location</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.save} onPress={() => {
        this.SaveAddress()
      }}>
        <Text style={styles.saveText}>{i18n.translations[I18nManager.isRTL].Save}</Text>
      </TouchableOpacity>
    </KeyboardAwareScrollView>
  </SafeAreaView>
)

}}

1 Ответ

0 голосов
/ 23 марта 2020

РЕДАКТИРОВАТЬ: я нашел решения для этой проблемы.

добавление этого в StackNavigator headerForceInset:{top:'never' , bottom:'never'} решило проблему мерцания, но макет был не в порядке. Итак, мне нужно было добавить стиль 

  UserProfile: {
      screen: UserProfile ,
      navigationOptions: ()=>({
        headerTitle: i18n.translations[I18nManager.isRTL].Profile,
        headerTintColor:'#99BFC4' ,
        headerTitleStyle: { marginTop:44, height: 44  },
        headerForceInset:{top:'never' , bottom:'never'},
        headerStyle: {
          height: 88,
           backgroundColor:'white',
         }, 

      })
    }
...