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

Question

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

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

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

任何意见或建议，将不胜感激！提前致谢！:)

已编辑

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

Answer 1

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

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