React native IOS InputAccessoryView исчезает с экрана после закрытия модального окна

Когда у меня на экране есть InputAccessoryView, у которого есть компонент без nativeID (поэтому он постоянно отображается, даже если клавиатура не отображается), и я открываю и закрываю Modal (реагирующий модальный), тогда InputAccessoryView исчезает с экрана вместе с компонентом. Я не знаю, почему это происходит, а также не знаю, как сохранить этот InputAccessoryView на экране.

Вот код для его воспроизведения:

import * as React from 'react';
import { View, ScrollView, AppRegistry, TextInput, InputAccessoryView, Button } from 'react-native';
import {Modal, Text, TouchableHighlight, Alert} from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {text: 'Placeholder Text', modalVisible: false,};
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{flex:1}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22, padding: 50, backgroundColor: '#0066ff'}}>
            <View>
              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text style={{color:"#ffffff"}}>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>


        <ScrollView style={{ backgroundColor: '#6ED4C8'}}>
         <Text></Text>
          <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text style={{padding: 40, backgroundColor: "#ff3300"}}>Show Modal</Text>
        </TouchableHighlight>
        </ScrollView>
        <InputAccessoryView backgroundColor="#ff9900" >
           <TextInput
            style={{
              padding: 20,
              paddingTop: 50,
            }}
            onChangeText={text => this.setState({text})}
            value={this.state.text}
          />
        </InputAccessoryView>
      </View>
    );
  }
}

Здесь вы можете найти онлайн-версию (имейте в виду, что проблема актуальна только для IOS): https://snack.expo.io/SJB7ipm6B

Некоторые изображения:

введите здесь описание изображения

введите здесь описание изображения

введите здесь описание изображения

Спасибо за ваше время и вашу помощь!


ios react-native inputaccessoryview
person Level_Up    schedule 03.12.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Попробуй с этим. Я выполняю повторный рендеринг InputAccessoryView после закрытия модального окна

{(!this.state.modalVisible) && <InputAccessoryView backgroundColor="#ff9900">
           <TextInput
            style={{
              padding: 20,
              paddingTop: 50,
            }}
            onChangeText={text => this.setState({text})}
            value={this.state.text}
          />
        </InputAccessoryView>}
person Asha    schedule 09.12.2019
comment
Спасибо за ответ! Да, это работает, хотя мне также интересно, почему это происходит. - person Level_Up; 11.12.2019
comment
Я думаю, что метод рендеринга пересчитывается из-за изменения состояния на modalvisible, поскольку он это делает, он повторно рендерит inputaccesoryview; - person André Pinto; 11.12.2019

arrow_upward
0
arrow_downward

Я просто столкнулся с той же проблемой. Покопавшись некоторое время, я понял, что установка параметра presentationStyle на overFullScreen в модальных исправлениях это для меня без повторного рендеринга InputAccessoryView.

person Tiemen    schedule 22.09.2020