ZIndex 仅与 Android 中的任何 react-native-paper 组件重叠答案

【问题标题】：ZIndex overlapping with any react-native-paper component in Android onlyZIndex 仅与 Android 中的任何 react-native-paper 组件重叠
【发布时间】：2021-04-01 06:39:03
【问题描述】：

我有一个绝对平面列表，如果我选择其中一个选项，并且有一个纸按钮或任何其他可按下的组件与所选元素一起被按下。

预期行为：

我正在使用 zIndex，但“react-native-paper”选项背后的组件仍然被点击。我尝试使用 TouchableOpactiy 它没有被点击，在 iOS 中一切正常，问题仅在 Android 中。

代码示例

截图

我已经在他们的 github 中包含了这个问题，你可以在那里看到整个事情。

https://github.com/callstack/react-native-paper/issues/2635

【问题讨论】：

标签： javascript reactjs typescript react-native react-native-paper

【解决方案1】：

我通过将平面列表移到 appbar.header 组件之外解决了这个问题

 <View style={{}}>
        <Appbar.Header
          style={{
            backgroundColor: colors.surface,
            borderBottomWidth: 1.5,
            borderBottomColor: hexToRgbA(colors.primary, 0.3),
          }}>
          <Appbar.BackAction
            style={{
              marginHorizontal: 5,
            }}
            onPress={_searchOff}
          />
          <TextInput
            underlineColor="transparent"
            underlineColorAndroid="transparent"
            style={{height: 56, backgroundColor: 'transparent', flex: 1}}
            value={searchQuery}
            placeholder={'Search...'}
            onChangeText={onChangeText}
            left={
              <TextInput.Icon
                name={() => (
                  <Icon name={'search'} color={colors.primary} size={20} />
                )}
                disabled={true}
              />
            }
            right={
              <TextInput.Icon
                style={{
                  height: 50,
                  width: 100,
                }}
                name={() => (
                  <Icon
                    name={'arrow-drop-down-circle'}
                    color={colors.primary}
                    size={20}
                    onPress={() => {
                      setFilteredArray(searchQuery);
                      arrowToggle(!arrow);
                    }}
                  />
                )}
              />
            }
          />
        </Appbar.Header>

        {arrow ? (
          <View
            style={{
              position: 'absolute',
              top: 55,
              width: '100%',
              zIndex: 123,
            }}>
            <FlatList
              data={filteredArrayList}
              style={style.mainlist}
              initialNumToRender={6}
              nestedScrollEnabled={false}
              keyExtractor={(item: any, index: number) => `${item.id}_${index}`}
              renderItem={({item}) => <SelectedItemJSX {...item} />}
            />
          </View>
        ) : null}
      </View>

【讨论】：