javascript - react-native open a modal inside a modal - Stack Overflow

admin管理员组

文章数量:1287512

I am using react-native-sectioned-multi-select library. I want to open another modal view after I click the confirm button.

I feel like I did the code correctly but this isn't working. Is it possible to open a new modal inside this library?

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

Any ments or advise would be really appreciated! Thanks in advance! :)

Edited

If I can't open two modals at a time, I want my new modal to open after I close my first modal.

I am using react-native-sectioned-multi-select library. I want to open another modal view after I click the confirm button.

I feel like I did the code correctly but this isn't working. Is it possible to open a new modal inside this library?

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

Any ments or advise would be really appreciated! Thanks in advance! :)

Edited

If I can't open two modals at a time, I want my new modal to open after I close my first modal.

• javascript
• react-native

Share Improve this question Follow edited Jan 2, 2019 at 5:59 kirimi asked Dec 31, 2018 at 5:04 kirimikirimi 1,40055 gold badges3333 silver badges6161 bronze badges 3

• You have called openModal() but inside that there is a condition for modal i.e. visible={this.state.modalVisible} where modalVisible is always false, so it will not show any modal. – Ravi Commented Dec 31, 2018 at 5:07
• @RaviRupareliya thanks for the ments but that doesn't seem to be the problem its still the same. – kirimi Commented Dec 31, 2018 at 5:13
• any luck @kirimi finding your answer ? – Ron Astle Lobo Commented Jan 6, 2019 at 10:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Multiple simultaneously open modals do not work in React Native. You could:

• close the first modal before opening the second one, then reopening the first one when you're done with the second
• roll your own modal using 'position: absolute' styling

Firstly, make sure both the Modal's aren't using the same state values for the visible prop in Modal.

You can use visible prop as visible={this.state.modalPage1}. The state modalPage1 should be initiated to bool value.

So if the scenario is that you are closing the first Modal and opening another one, then

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

Hope I could help you. Do ment if any other Doubts.

You could manipulate multiple modal visibility with Conditional Rendering using logical operator.
Here is the snippet code that might work in your case:

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

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

You dont call directly a modal, you have to toggle the visible state of modal

And then you need to close the modal as well whenever your task is pleted, all you need to do is, on click or on Press....

    this.setState({ modalVisible: false });

本文标签： javascriptreactnative open a modal inside a modalStack Overflow