ScrollView не реагирует на прикосновения в Android - PullRequest
0 голосов
/ 14 января 2019

Я создаю компонент «Поиск», в котором ScrollView отображается, когда поисковые термины в TextInput возвращают связанные теги из конечной точки API. Во время работы в iOS компонент работает должным образом и позволяет мне прокручивать список и выбирать опцию. Тем не менее, Android, кажется, не позволяет прокручивать или касаться события на компоненте ScrollView. Я украсил компонент с клавиатурыShouldPersistTaps = "всегда" и nestedScrollEnabled = {true}.

Попытка размещения ScrollView на разных уровнях общего экрана. При приближении к представлению верхнего уровня ScrollView работает как задумано, но на определенной глубине он перестает работать. Чтобы ScrollView находился выше в компоненте, потребовалось бы много вычислений на основе событий onLayout каждого вложенного представления, чтобы компонент соответствовал проектам, поэтому я хотел бы избежать этого, если это возможно.

<ScrollView
    style={Style.view}
    contentContainerStyle={Style.container}
    keyboardShouldPersistTaps="handled"
>
    <TouchableOpacity
        onPress={this.onClose}
          style={Style.close}
          hitSlop={{
            top: 16,
            right: 16,
            bottom: 16,
            left: 16,
          }}
        >
          <Icon
            name="times"
            size={24}
            color={Palette.$color_white}
          />
        </TouchableOpacity>
        <Animated.View style={[Style.animatedWrapper, { transform: [{ translateY }] }]}>
          <View style={Style.tags}>
            {
              tags.map(tag => (
                <View key={tag.guid} style={Style.tag}>
                  <Strong color={Palette.$color_white}>{tag.name}</Strong>
                  <TouchableOpacity
                    style={Style.tagButton}
                    onPress={() => this.onTagPress(tag)}
                    hitSlop={{
                      top: 16,
                      right: 16,
                      bottom: 16,
                      left: 16,
                    }}
                  >
                    <Icon name="times" size={14} color={Palette.$color_white} />
                  </TouchableOpacity>
                </View>
              ))
            }
          </View>
          <View style={Style.searchWrapper} onLayout={this.onLayout}>
            <Image
              source={Buzz}
              style={Style.illustration}
            />
            <View style={Style.inputWrapper}>
              <Heading
                level={3}
                color={Palette.$color_white}
              >
                Search by key words
              </Heading>
              <View style={Style.controlWrapper}>
                <View style={{ flex: 1 }}>
                  <TextInput
                    ref={(ref) => { this.input = ref; }}
                    returnKeyType="done"
                    textContentTypez="none"
                    placeholder="Type your search"
                    onChangeText={this.onChangeText}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    underlineColorAndroid="transparent"
                    placeholderTextColor={Palette.$color_white}
                    style={Style.searchInput}
                  />
                  <Animated.View
                    style={[Style.menu, { opacity: menuOpacity }]}
                    pointerEvents={isMenuOpen ? 'auto' : 'none'}
                  >
                    <ScrollView
                      contentContainerStyle={Style.menuOptionsContentContainer}
                      keyboardShouldPersistTaps="always"
                      style={[Style.menuOptions, { maxHeight: scrollHeight }]}
                      nestedScrollEnabled
                    >
                      {
                        !isLoading
                          ? results.map(tag => (
                            <TouchableHighlight
                              style={Style.menuOption}
                              key={tag.guid}
                              onPress={() => this.onOptionSelect(tag)}
                              underlayColor={Palette.$color_light_grey}
                            >
                              <Text style={Style.menuOptionText}>{tag.name}</Text>
                            </TouchableHighlight>
                          ))
                          : (
                            <View style={Style.activityIndicator}>
                              <ActivityIndicator size="small" color={Palette.$color_orange} />
                            </View>
                          )
                      }
                    </ScrollView>
                  </Animated.View>
                </View>
                <StyledTextButton
                  title="Search"
                  onPress={this.onSearchPress}
                  disabled={tags.length <= 0}
                />
              </View>
            </View>
          </View>
        </Animated.View>
      </ScrollView>

ScrollView отображается должным образом, но в Android он не может реагировать на прикосновения и жесты. Работает так, как задумано в iOS.

Вот пример в iOS Компонента.

Search Component functioning in iOS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...