Я создаю компонент «Поиск», в котором 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 Компонента.