时间戳

首页 > 解决方案 > ZIndex 仅与 Android 中的任何 react-native-paper 组件重叠

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

问题描述

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

预期行为：

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

代码示例

主页

应用栏

自定义搜索栏

截屏

问题的 GIF

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

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

标签： javascriptreactjstypescriptreact-nativereact-native-paper

解决方案

我通过将平面列表移到 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>

推荐阅读