Question

我正在使用react-native-sectioned-multi-select库。单击确认按钮后，我想打开另一个模式视图。

我觉得我正确地编写了代码，但这不起作用。是否可以在该库中打开新的模态？

txt_home.setTextSize(12);

任何评论或建议将不胜感激！提前致谢！：）

已编辑

如果我一次不能打开两个模态，我希望在关闭第一个模态后打开新模态。

Answer 1

多个同时打开的模态在React Native中不起作用。您可以：

在打开第二个模态之前先关闭第一个模态，然后在完成第二个模态后重新打开第一个模态
使用“位置：绝对”样式滚动自己的模态

Answer 2

首先，请确保Modal中的state values道具的两个visible没有使用相同的Modal。

您可以将visible道具用作visible={this.state.modalPage1}。应该将状态modalPage1初始化为bool值。

因此，如果情况是您要关闭第一个模式并打开另一个模式，则

this.setState({ 
      modalPage1: false, 
      modalPage2: true
});

希望我能帮助您。如有其他疑问，请发表评论。

Answer 3

您可以使用逻辑运算符使用Conditional Rendering来操纵多个模式可见性。
以下是适用于您的情况的代码段：

{
  this.state.isFirstModalOpen && (
    <Modal
      animationType="slide"
      transparent={false}
      visible={this.state.isModalOpen}
      onRequestClose={() => {
        Alert.alert("Modal has been closed.");
      }}
    >
      <View style={{ marginTop: 22 }}>
        <View>
          <Text>Hello World!</Text>

          <TouchableHighlight
            onPress={() => {
              this.setState({
                isFirstModalOpen: false,
                isSecondModalOpen: true
              });
            }}
          >
            <Text>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
}
{
  this.state.isSecondModalOpen && (
    <Modal
      animationType="slide"
      transparent={false}
      visible={this.state.isSecondModalOpen}
      onRequestClose={() => {
        Alert.alert("Modal has been closed.");
      }}
    >
      <View style={{ marginTop: 22 }}>
        <View>
          <Text>Hello World!</Text>

          <TouchableHighlight
            onPress={() => {
              this.setState({ isSecondModalOpen: false });
            }}
          >
            <Text>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
}

Answer 4

render() {
return (
<SafeAreaView style={{flex:1}}>
<View>
    <SectionedMultiSelect
      items={items}
      uniqueKey='id'
      subKey='children'
      selectText='Choose some things...'
      showDropDowns={true}
      readOnlyHeadings={true}
      onSelectedItemsChange={this.onSelectedItemsChange}
      selectedItems={this.state.selectedItems}
//Here I call the openModal function but nothing appears
      //onConfirm={()=> {this.openModal}}  <-- change this with
      onConfirm={() => this.setState({modalVisible: true})}
    />
  </View>
</SafeAreaView>
);
}

您不直接调用模态，必须切换模态的可见状态

然后，每当任务完成时，您也需要关闭模式，只需单击或按一下即可。...

    this.setState({ modalVisible: false });

react-native在模式内部打开模式

4 个答案: