javascript - react-native-paper Modal在可见时不隐藏所有其他元素

Question

我的模态并没有完全超越 Android 下的所有其他组件，但在 Ios 下运行良好。

我尝试更改组件的层次结构，使用 zIndex 和绝对位置，但我的绿色按钮始终可见，但在模态显示时不可触摸。

模态不可见（Android 和 Ios）：

模态可见（Android）按钮仍然可见：

模态可见（Ios）按钮不可见：

我的组件：

<View style={styles.container}>
  <Spinner
    visible={spinner}
    textContent={'Recherche de jardins...'}
    textStyle={styles.spinnerTextStyle}
  />
  <View style={[styles.noThreadContainer, {flex: 5}]}>
    <View style={styles.noThreadView}>
      <Title style={styles.noThreadTitle}>
        Personne autour de vous à {toKm(finalDistance)} km
      </Title>
      <Button icon="map-marker-distance" mode="contained" onPress={showModal}>
        Modifier la distance
      </Button>
    </View>
  </View>
  <SliderModal style={{flex: 1}} />
</View>;

滑块模式：

const SliderModal = () => {
  const minValue = 5000;
  const maxValue = 200000;
  const [kmValue, setKmValue] = useState(finalDistance || 5000);
  return (
    <Provider>
      <Portal>
        <Modal
          visible={visible}
          dismissable={false}
          onDismiss={hideModal}
          contentContainerStyle={styles.sliderContainer}>
          <Title style={{alignSelf: 'center', marginBottom: 40}}>
            Modifier la distance
          </Title>
          <View style={styles.kmContainer}>
            <Text>{toKm(minValue)} km</Text>
            <Title>{toKm(kmValue)} km</Title>
            <Text>{toKm(maxValue)} km</Text>
          </View>
          <Slider
            onValueChange={setKmValue}
            value={finalDistance}
            step={5000}
            style={styles.slider}
            minimumValue={minValue}
            maximumValue={maxValue}
            minimumTrackTintColor="brown"
            maximumTrackTintColor="#77DD77"
          />
          <View style={[styles.kmContainer, styles.buttonContainer]}>
            <Button color="brown" onPress={hideModal}>
              Fermer
            </Button>
            <Button
              labelStyle={{color: 'white'}}
              color="#77DD77"
              mode="contained"
              onPress={() => {
                hideModal();
                setFinalDistance(kmValue);
              }}>
              Valider
            </Button>
          </View>
        </Modal>
      </Portal>
    </Provider>
  );
};

样式表：

const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    sliderContainer: {backgroundColor: 'white', padding: 20},
    slider: {width: '100%', height: 40},
    kmContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    buttonContainer: {
      marginTop: 30,
    },
    noThreadView: {
      alignSelf: 'center',
      justifyContent: 'center',
      width: width * 0.8,
    },
    noThreadContainer: {
      flex: 1,
      alignContent: 'center',
      justifyContent: 'center',
    },
    noThreadTitle: {
      marginBottom: 15,
      alignSelf: 'center',
    },
    spinnerTextStyle: {
      color: '#FFF',
    },
  });

标签： javascriptreact-nativemodal-dialogreact-native-paper

Answer 1

就在按钮添加！可见之前，像这样：

 { !visible && <Button icon="map-marker-distance" mode="contained" onPress={showModal}>
                  Modifier la distance
                </Button>
 }