react-native嵌套ScrollView无法响应android中的touch

Question

我正在构建一个“搜索”组件，当TextInput中的搜索词从API端点返回相关标签时，将在其中显示ScrollView。在iOS中运行时，该组件可以按预期工作，并允许我滚动列表并选择一个选项。但是，android似乎不允许ScrollView组件上的滚动或触摸事件。我已经用keyboardShouldPersistTaps =“ always”和nestedScrollEnabled = {true}装饰了组件。

尝试将ScrollView放置在整个屏幕的不同级别。当靠近顶层视图时，ScrollView会按预期工作，但在一定深度下它将停止工作。为了使组件与设计匹配，将ScrollView置于组件中的较高位置将需要大量计算，以基于每个嵌套View的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中的示例。