Javascript 在模态中打开模态

我正在使用图书馆。单击“确认”按钮后，我想打开另一个模式视图

我觉得我做的代码是正确的，但这不起作用。是否可以在此库中打开新模式

const items = [
  {
    name: "Fruits",
    id: 0,
    children: [{
        name: "Apple",
        id: 10,
      },{
        name: "Strawberry",
        id: 17,
      },{
        name: "Pineapple",
        id: 13,
      },{
        name: "Banana",
        id: 14,
      },{
        name: "Watermelon",
        id: 15,
      },{
        name: "Kiwi fruit",
        id: 16,
      }]
  }]

export default class TestScreen extends Component {
  constructor(){
    super()
    this.state = {
      selectedItems: [],
      modalVisible: false,
    }
  }

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

  onSelectedItemsChange = (selectedItems) => {
    this.setState({ selectedItems });
    console.log(selectedItems)
  }

  openModal = () => {
   return(
      <SafeAreaView style={{flex:1}}>
         <View style={{width:300, height:400, backgroundColor:'red'}}>
           <Modal
             animationType="slide"
             transparent={false}
             visible={this.state.modalVisible}
             onRequestClose={() => {
               Alert.alert('Modal has been closed.');
             }}>
             <View style={{marginTop: 22}}>
               <View>
                 <Text>Hello World!</Text>

                 <TouchableHighlight
                   onPress={() => {
                     this.setModalVisible(!this.state.modalVisible);
                   }}>
                   <Text>Hide Modal</Text>
                 </TouchableHighlight>
               </View>
             </View>
           </Modal>

           <TouchableHighlight
             onPress={() => {
               this.setModalVisible(true);
             }}>
             <Text>Show Modal</Text>
           </TouchableHighlight>
         </View>
        </SafeAreaView>
    )
  }

  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}}
        />
      </View>
    </SafeAreaView>
    );
  }
} 

const项=[
{
名称：“水果”，
id:0，
儿童：[{
名称：“苹果”，
id:10，
},{
名称：“草莓”，
身份证号码：17，
},{
名称：“菠萝”，
id:13，
},{
名称：“香蕉”，
身份证号码：14，
},{
名称：“西瓜”，
身份证号码：15，
},{
名称：“猕猴桃”，
身份证号码：16，
}]
}]
导出默认类TestScreen扩展组件{
构造函数（）{
超级（）
此.state={
selectedItems:[]，
modalVisible:错误，
}
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
onSelectedItemsChange=（selectedItems）=>{
this.setState（{selectedItems}）；
console.log（selectedItems）
}
OpenModel=（）=>{
返回(
{
警报。警报（'模式已关闭'）；
}}>
你好，世界！
{
this.setModalVisible（！this.state.modalVisible）；
}}>
隐藏模态
{
此.setModalVisible（true）；
}}>
显示模态
)
}
render（）{
返回(
{this.openModal}}
/>
);
}
} 

任何意见或建议将不胜感激！提前感谢！：）

已编辑

---

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

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

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

---

首先，确保两个

模式

在

模式

中对

可见

道具使用相同的

状态值

您可以使用

visible

prop作为

visible={this.state.modalpage 1}

。状态

modalPage1

应初始化为

bool

值

因此，如果场景是关闭第一个模态并打开另一个模态，那么

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

---

希望我能帮助你。如果有任何其他疑问，请发表评论。

您可以使用逻辑运算符操纵多模态可见性
以下是可能适用于您的案例的代码片段：

{
  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>
  );
}

{
this.state.isFirstModalOpen&&(
{
警报。警报（“模式已关闭”）；
}}
>
你好，世界！
{
这是我的国家({
isFirstModalOpen:错，
isSecondModalOpen：是的
});
}}
>
隐藏模态
);
}
{
this.state.isSecondModalOpen&&(
{
警报。警报（“模式已关闭”）；
}}
>
你好，世界！
{
this.setState（{isSecondModalOpen:false}）；
}}
>
隐藏模态
);
}

您已经调用了

openModal（）

但其中有一个模态条件，即

visible={this.state.modalVisible}

其中modalVisible始终为false，所以它不会显示任何模态。@RaviRupareliya谢谢你的评论，但这似乎不是问题，它仍然是一样的。运气好吗@kirimi找到你的答案了吗？

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 });