导航屏幕与其他屏幕重叠

Question

你好，我是本机反应的新手我在导航时遇到了异常行为，它发生在两个模态屏幕之间第一个模态屏幕如图所示导航进入下一个屏幕工作正常

这是导航上的第二张模态图片 当我按下 div 上传 cnic 图片时出现问题，然后屏幕合并两个是不同的组件，前一个屏幕模态出现如您在照片中看到的那样我在屏幕上用两个模态屏幕标记 这是我的 CNIC 上传屏幕代码

<TouchableWithoutFeedback
      onPress={() => {
        displayModal(!modalVisible);
      }}>
      <View style={styles.container}>
        <Modal
          onBackdropPress={() => setModalVisible(false)}
          onSwipeComplete={() => setModalVisible(false)}
          swipeDirection={['down']}
          useNativeDriverForBackdrop
          style={{margin: 0}}
          isVisible={modalVisible}>
          <View
            style={{
              flex: 1,
              borderTopLeftRadius: 25,
              borderTopRightRadius: 25,
              marginTop:
                steper === 'step' ? deviceHeight * 0.1 : deviceHeight * 0.2,
              backgroundColor: 'white',
              alignItems: 'center',
            }}>
            <View
              style={{
                width: '100%',
                height: '100%',
                // alignItems: 'center',
                marginTop: 3,
                justifyContent: 'space-evenly',
              }}>
              <View style={{width: '100%', alignItems: 'center'}}>
                <PopupBorder />
              </View>

              {/* first half */}
              <View
                style={{
                  width: '100%',
                  alignItems: 'center',
                  height: '18%',
                  justifyContent: 'flex-end',
                }}>
                <View style={styles.subContainer}>
                  <Image
                    style={{width: '40%', height: '50%', resizeMode: 'contain'}}
                    source={require('../assests/finger-print.png')}
                  />
                  <Text style={{fontSize: 18}}>Verify your account </Text>
                  <SubTitle
                    amount
                    color="#636363"
                    title="We require CNIC and Selfie for the verification"
                  />
                </View>
              </View>
              {/* steper */}
              <View
                style={{
                  height: '10%',
                  justifyContent: 'center',
                }}>
                <DocumentSteper step={steper} />
              </View>

              {/* steper */}

              {/* second half */}
              <View
                style={{
                  width: '100%',
                  height: '70%',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <View style={styles.subContainer}>
                  <TouchableOpacity
                    style={{
                      width: '100%',
                      height: '80%',
                      alignItems: 'center',
                    }}>
                    {steper === 'step' ? (
                      <>
                        <TouchableOpacity
                          activeOpacity={0.6}
                          onPress={takeFrontPhotoFromCamera}
                          style={styles.imageContainer}>
                          <ImageBackground
                            style={styles.uploadStyle}
                            // resizeMode="contain"
                            source={
                              frontImage === null ? null : {uri: frontImage}
                            }>
                            <Image source={require('../assests/upload.png')} />

                            <View style={{paddingTop: 5}}>
                              <SubTitle
                                title="CNIC FRONT"
                                font
                                color="#06B2BC"
                                fontSize={14}
                                amount
                              />
                            </View>
                          </ImageBackground>
                        </TouchableOpacity>
                        <TouchableOpacity
                          activeOpacity={1}
                          onPress={takeBackFrontPhotoFromCamera}
                          style={styles.imageContainer}>
                          <ImageBackground
                            style={styles.uploadStyle}
                            // resizeMode="contain"
                            source={
                              backImage === null ? null : {uri: backImage}
                            }>
                            <Image source={require('../assests/upload.png')} />
                            <View style={{paddingTop: 5}}>
                              <SubTitle
                                title="CNIC FRONT"
                                font
                                color="#06B2BC"
                                fontSize={14}
                                amount
                              />
                            </View>
                          </ImageBackground>
                        </TouchableOpacity>
                      </>
                    ) : (
                      <TouchableOpacity
                        onPress={takeSelfie}
                        style={styles.singleimageContainer}>
                        <ImageBackground
                          style={styles.uploadStyle}
                          // resizeMode="contain"
                          source={selfie === null ? null : {uri: selfie}}>
                          <Image source={require('../assests/upload.png')} />
                          <View style={{paddingTop: 5}}>
                            <SubTitle
                              title="CNIC FRONT"
                              font
                              color="#06B2BC"
                              fontSize={14}
                              amount
                            />
                          </View>
                        </ImageBackground>
                      </TouchableOpacity>
                    )}
                  </TouchableOpacity>
                  <View
                    style={{
                      width: '100%',
                      height: '20%',
                      justifyContent: 'flex-end',
                    }}>
                    <Button
                      click={verify}
                      title={
                        steper === 'step' ? ' Verify CNIC' : 'Verify SELFIE'
                      }
                      backgroundColor="white"
                      marginBottom={15}
                      color="#06B2BC"
                    />
                  </View>
                </View>
              </View>
            </View>
          </View>
        </Modal>
        <TouchableWithoutFeedback onPress={() => !modalVisible}>
          <TouchableOpacity style={styles.map}>
            <Image source={require('../assests/map.png')} />
          </TouchableOpacity>
        </TouchableWithoutFeedback>
      </View>
    </TouchableWithoutFeedback>

Answer 1

我们无法从您的代码示例中看到您在何处调用第二步“上传 cnic 图片”。您似乎在第一个模态之上调用了另一个模态。

如果您计划在此模态中拥有一个完整的流程，那么最好集成一个合适的导航器，而不是在模态之间“导航”。