当子组件涉及时，React-native modal组件不回滚答案

【问题标题】：React-native modal component not rolling back when child compoent involves当子组件涉及时，React-native modal组件不回滚
【发布时间】：2018-01-28 07:08:59
【问题描述】：

当我按下提交按钮时，模式会向上滑动，但当我按下“隐藏模式”时，它不会回滚到其原点。我在 onPress 回调之后控制台记录 ChildScreen.js 文件，我得到：

对象{ “模态可见”：假， }

这意味着模态必须回滚到其原始位置，但这并没有发生！有谁知道为什么？注意：当我不导入时，模态完美工作！

ParentScreen.js

import React from "react";
import { View, Text, Modal } from "react-native";
import { Button } from 'react-native-elements';
import ChildScreen from './ChildScreen';

export default class ParentScreen extends React.Component {
  state = {
    modalVisible: false
  }

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

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Modal
          animationType={"slide"}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => { alert("Modal has been closed.") }}
        >
          <View style={{ marginTop: 22 }}>
            <ChildScreen />
          </View>
        </Modal>
        <View
          style={{
            position: 'absolute', bottom: 30, left: 0, right: 0, justifyContent: 'center',
          }}
        >
          <Button
            onPress={this._onPress.bind(this)}
            title='SUBMIT' />
        </View>
      </View>
    );
  }
}

ChildScreen.js

import React, { Component } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';


class ChildScreen extends Component {
  state = {
    modalVisible: true
  }

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }
  render() {
    return (
      <View>
        <Text>ChildScreen</Text>
        <TouchableHighlight onPress={() => {
          this.setModalVisible(this.state.modalVisible = false)
          console.log(this.state)
        }}>
          <Text>Hide Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

export default ChildScreen;

【问题讨论】：

标签： javascript react-native components

【解决方案1】：

我向 <ChildScreen /> 组件添加了一个名为 hide 的回调，例如：

<ChildScreen
   hide={this.onModalChange}
/>

并称它为：

<TouchableHighlight onPress={this.props.hide}>
   <Text>Hide Modal</Text>
</TouchableHighlight>

我将状态管理更改为 redux，一切正常。

【讨论】：