react-native-paper Modal在Android端显示时未遮挡下层组件问题

问题描述 #

我使用的react-native-paper Modal在iOS端可正常覆盖全部下层组件，但在Android端无法完全覆盖所有组件，Modal显示时下层绿色按钮仍然可见，仅处于不可点击状态。
我已经尝试调整组件层级、修改zIndex值和absolute定位属性，均未解决该问题。

Modal未显示（Android & iOS）： #

Modal显示（Android端 按钮仍可见）： #

Modal显示（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>;

SliderModal组件代码 #

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

解决方案 #

该问题由两个原因导致：一是react-native-paper的Portal需要全局唯一的Provider才能生效，二是Android端elevation属性的优先级高于zIndex，自带elevation阴影的按钮会穿透Modal层级显示。
可按以下步骤修复：

1. 确认你的App根组件已经包裹了react-native-paper的Provider，直接删除SliderModal组件内部多余的<Provider>标签，避免Portal的全局层级失效。
2. 给下层触发Modal的按钮添加elevation={0}属性，取消它的默认elevation层级：

<Button 
  icon="map-marker-distance" 
  mode="contained" 
  onPress={showModal}
  style={{elevation: 0}}
>
  Modifier la distance
</Button>

3. 也可以给Modal的内容容器添加elevation属性，保证层级高于下层按钮即可：

sliderContainer: {
  backgroundColor: 'white', 
  padding: 20,
  elevation: 10
}

内容的提问来源于stack exchange，提问作者XplosiVe06