Question

我已经制作了两个组件（父级和子级），并导入了包含反应本机模式的子级

状态更改后，我具有渲染子组件，它第一次渲染但第二次不起作用。

Parent.js文件如下：

import react, {Component} from 'react';
import { View, Text, TouchableOpacity} from 'react-native';
import ActionModal from './ActionModal';

export default class Parent extends Component {
 constructor(props){
   super(props);
   this.state = { tabclicked: false }
 }

 actiontabclicked = () => {
   this.setState({ tabclicked: true });
 }

 render(){
   return (
     <View>
      <TouchableOpacity onPress={() => { this.actiontabclicked()} }>
     <Text> MOVE</Text>
      </TouchableOpacity>

      { (this.state.tabclicked) ? <ActionModal /> : null }

     </View>
   )
 }
}

ActionModal.js文件代码

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

export default class ActionModal extends Component {

  constructor(){
   super();
   this.state = { modalVisible: true }
  }

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

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
        animationType="slide"
        transparent={false}
        visible={this.state.modalVisible}
        onRequestClose={() => { this.setModalVisible(!this.state.modalVisible)}}>
        <View style={{marginTop: 22}}>
          <View>
            <Text>Hello World!</Text>
          </View>
        </View>
      </Modal>
    </View>
   );
 }
}

ActionModal第一次打开而不是第二次打开，我认为这是因为状态变为true，但是在关闭模式之后它不会重置。我该如何实现？预先感谢

Answer 1

如果要实现点击>关闭>重新点击>显示这样的行为，您并不清楚要实现的目标您应该在setModalVisible函数中进行如下操作：

setModalState = () => {
    this.setState(prevState => ({
            modalVisible: !prevState.modalVisible
          })
  }

这将改变与原来相反的状态。如果您想拥有更多控制权，则可以创建两个功能setModalOpen和setModalClosed

也许在触发onRequestClose将此功能传递给父级时可以在子级组件上使用props，然后可以在其中调用setModalClosed，您要做的方法是进行回调使用给定的道具（在互联网上寻找将道具传递给家长以进行反应，这很简单）

希望我能帮助

如何在状态更改时重新渲染导入组件

1 个答案: