关闭模式后反应本机IOS InputAccessoryView从屏幕上消失答案

【问题标题】：React native IOS InputAccessoryView disappear from the screen after close modal关闭模式后反应本机IOS InputAccessoryView从屏幕上消失
【发布时间】：2020-03-28 02:46:48
【问题描述】：

当我在屏幕上有 InputAccessoryView 时，它的组件没有 nativeID（因此即使没有显示键盘，它也会不断显示）并且我打开和关闭 Modal（react-native 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

【解决方案1】：

试试这个。一旦模式关闭，我将重新渲染InputAccessoryView

{(!this.state.modalVisible) && <InputAccessoryView backgroundColor="#ff9900">
           <TextInput
            style={{
              padding: 20,
              paddingTop: 50,
            }}
            onChangeText={text => this.setState({text})}
            value={this.state.text}
          />
        </InputAccessoryView>}

【讨论】：

感谢您的回答！是的，这是有效的，尽管我也很感兴趣为什么会这样。
我认为渲染方法会因为 modalvisible 上的状态变化而重新计算，因为它这样做了，它会重新渲染 inputaccesoryview；

【解决方案2】：

我刚刚遇到了同样的问题。在挖掘了一段时间后，我发现将模式上的 presentationStyle 属性设置为 overFullScreen 可以为我修复它，而无需重新渲染 InputAccessoryView。

【讨论】：