Question

因此，基本上我的应用程序中有一个屏幕，其中有一个按钮，并且此按钮应打开一个Modal，它也是同一屏幕js文件中的一个自制组件。

我正在设置屏幕上的可见状态，并且该按钮具有一个onPress处理程序，该处理程序可切换可见状态（false / true）。

我不知道如何在单击按钮时显示自己的modalComponent。

btw使用react-native-modal

自己的模态组件：

class PhasenModal extends Component {
  render() {
    return (
      <View>
        <Modal isVisible={this.props.visible}>
          <View style={{ flex: 1 }}>
            <Text>I am a modal</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

在我的ScreenView中：

<Button
  buttonStyle={styles.phaseButton}
  title="Choose"
  onPress={() => this.phasenModalHandler()}
/>

onPress功能：

phasenModalHandler() {
  this.setState({ visible: !this.state.visible });
  if (this.state.visible) {
    return <PhasenModal visible={this.state.visible} />;
  } else {
    return;
  }
}

我希望按钮显示模式，但不显示任何内容，通过正确地将状态从false切换为true，可以正确切换状态。

我猜我的onPress fctn是错误的，因为我不知道如何渲染组件。

谢谢。

Answer 1

从事件处理程序返回的内容将不会呈现，因此您可以在状态下使用visible值来有条件地呈现PhasenModal组件。

class ScreenView extends Component {
  state = {
    visible: false
  };

  phasenModalHandler = () => {
    this.setState(({ visible }) => ({ visible: !visible }));
  };

  render() {
    return (
      <>
        <Button
          buttonStyle={styles.phaseButton}
          title="Choose"
          onPress={this.phasenModalHandler}
        />
        {this.state.visible && <PhasenModal />}
      </>
    );
  }
}

class PhasenModal extends Component {
  render() {
    return (
      <View>
        <Modal isVisible>
          <View style={{ flex: 1 }}>
            <Text>I am a modal</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

如何在onPress调用中打开组件？

1 个答案:

如何在onPress调用中打开组​​件？

1 个答案:

如何在onPress调用中打开组件？