Question

我正在使用react-native-modalbox。我想做的是在状态更改时自动打开模式，而不是使用按钮。

下面是我的代码，可以通过按钮正常工作。但我希望在stateChange状态更改时打开模式。

import React from 'react';
import Button from 'react-native-button';
import Modal from 'react-native-modalbox';
import {Text, StyleSheet, ScrollView, View, Dimensions, TextInput} from 'react-native';
var screen = Dimensions.get('window');

export default class TestScreen extends React.Component {

  constructor() {
    super();
    this.state = {
      isDisabled: false,
      number:''

//I want to open modal when this state is changed

      stateChange:''
    };
  }

  render() {

    return (
      <View style={styles.wrapper}>

// When I press this button it opens a modal  

        <Button onPress={() => this.refs.modal3.open()} style={styles.btn}>Position centered + backdrop + disable</Button>

        <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
          <Text style={styles.text}>Modal centered</Text>
          <Button onPress={() => this.setState({isDisabled: !this.state.isDisabled})} style={styles.btn}>Disable ({this.state.isDisabled ? "true" : "false"})</Button>
        </Modal>

      </View>
    );
  }
}

已编辑

我想使用react生命周期方法来侦听此更新并自动对其进行更新。所以我正在使用componentDidUpdate。我想更新this.state.number商店时更新mobx。但是，下面的代码不起作用。

componentDidUpdate(nextProps, nextState) {
    this.setState({number:store.requestObject.number},
    console.log(this.state.number), 'state changed')
  }

Answer 1

您可以使用模式的isOpen属性根据状态将其打开。在您的状态下获取一个属性isOpen并根据您的先决条件进行更改，isOpen将打开模式。

<Modal isOpen={this.state.isOpen}>content</Modal>

检查this

状态更改时自动生成本机打开模式

1 个答案: