Как открыть React Native Modal с изменением состояния JUST (без триггера onPress)? - PullRequest
Новая
       36

Как открыть React Native Modal с изменением состояния JUST (без триггера onPress)?

0 голосов
/ 13 мая 2019

Я хочу, чтобы модальный RN всплывал при выпадающем (RN Material Dropdown) вызовеChangeText.Однако, несмотря на то, что this.state.modalVisibleTwo с помощью этой функции изменяется на true, модальное состояние не отображается при изменении состояния.

Существует ли способ прямого запуска открытия модального слоя.

Я предпринял попытку условного рендеринга на основе this.state.modalVisibleTwo с видимым модалом = {true} и по-прежнему ничего. 

            <Modal
              animationType='slide'
              presentationStyle='overFullScreen'
              transparent={true}
              visible={this.state.modalVisibleTwo}
              ref={component => this.inputModal = component}
              onRequestClose={() => {
              //  console.log('Modal has been closed.');
              }}>
              <View style={styles.inputContainer}>
                <View style={styles.innerContainer}>
                  <Text style={styles.howMany}>test</Text>
                  <TextInput
                    style={styles.textInput2}
                    underlineColorAndroid={'rgba(0,0,0,0)'}
                    maxLength={3}
                    autoCorrect= {false}
                    clearButtonMode="while-editing"
                    keyboardType="numbers-and-punctuation"
                    ref={component => this._textInput2 = component}
                    onChangeText={(q) => this.setState({currentQuantity: q})}
                    placeholder= {strings.enter}/>
                  <View style={{flexDirection: 'row'}}>
                    <Button
                      onPress={() => {
                        this.setModalVisibleTwo(false);
                      }}>
                      {strings.close}
                    </Button>
                    <TouchableOpacity style={styles.Button2} onPress={()=> {this.addToCart(order, orderNumber, isCartEmpty)}}>
                      <Text style={styles.addToOrderButtonText2}>{strings.add}</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            </Modal>

<TouchableWithoutFeedback onPress={()=>Keyboard.dismiss()} accessible={false}>
                <View>
                  <Text style={styles.bodyTitle}>{strings.schedTitle}</Text>
                  <View style={styles.dropdownContainer}>
                    <Dropdown
                      label={strings.select}
                      data={this.state.services}
                      itemTextStyle={{fontFamily: 'Heiti TC', }}
                      containerStyle={styles.dropDown}
                      baseColor={'#002d62'}
                      itemColor={'rgba(0, 0, 0, .54)'}
                      selectedItemColor={'#002d62'}
                      itemPadding={9}
                      itemCount={7}
                      dropdownPosition={-8}
                      pickerStyle={{width: screenWidth*(3/4), marginLeft: screenWidth*0.032}}
                      onChangeText={(val)=>{this.updateView(val)}}
                    />
                    <TouchableOpacity style={styles.Button} onPress={()=> {this.addToCart(order, orderNumber, isCartEmpty)}}>
                      <Text style={styles.addToOrderButtonText}>{strings.ok}</Text>
                    </TouchableOpacity>
                  </View>
                  <TouchableOpacity onPress={()=>{this.setModalVisibleTwo(true)}}>
                    <Text style={styles.modalTitle1}>{strings.which}</Text>
                  </TouchableOpacity>
                </View>
              </TouchableWithoutFeedback>

updateView(val){
    //this.inputModal.open();
    if(val == strings.dobox || val == strings.pubox){
      // How Many Boxes
      this.setState({modalVisibleTwo: true, currentService: val, isBox: strings.isBox, updatedDrop: false});
    } else if(val == strings.dobar || val == strings.pubar){
      // How Many Barrels
      this.setState({modalVisibleTwo: true, currentService: val, isBox: strings.isBarrel, updatedDrop: false});
    }
    else{
      // Nothing
      this.setState({currentService: val, currentQuantity: '', isBox: '', updatedDrop: false});
    }
  }

Я ожидаю, что модал появится послеизменение состояния modalVisibleTwo на true после вызова onChangeText в раскрывающемся меню, но фактическим выводом является изменение состояния, и модальное всплывающее окно не появляется.

...