Блог

У меня есть абсолютный плоский список, и если я выберу один из вариантов, и есть кнопка бумаги или любой другой нажимаемый компонент, который нажимается рядом с выбранным элементом.

Ожидаемое поведение:

Я использую zIndex, но все же компонент, стоящий за опцией из «react-native-paper», все еще нажимается. Я попытался использовать TouchableOpactiy, на него не нажимают, в iOS все работает нормально, проблема только в Android.

Пример кода

Домашняя страница

Панель приложений

Панель пользовательского поиска

Скриншот

Gif для проблемы

Я уже включил эту проблему в их github, вы можете увидеть все это там.

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

Я решил это, переместив плоский список за пределы компонента 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>