Question

我目前正在使用此BottomSheet github page

该视图分为标题和内容。页眉保持在原位，内容可滚动，并且还检测用户是否要向下滑动来关闭纸张。但是现在我在Android设备上遇到了问题。我认为内容种类会阻止onPress，以便它可以检测用户是否要关闭它。我的TouchableOpacities在那里不起作用。如果我按它们，它们会淡出（它们的正常行为），但是不会触发onPress。在iOS上可以使用。 onPressOut对我来说别无选择。有没有办法触发onPress或类似的东西？

编辑：

这是我的内容视图：

import {Button, FlatList, Text, TouchableOpacity, View} from "react-native";
    __renderExercise = ({item, index}: { item: Exercise, index: number }) => {
        return (
            <View
                style={{
                    width: "100%",
                    height: "auto",
                    flexDirection: "row",
                    marginTop: PADDING
                }}>
                <ImagePlaceholder
                    source={item.image}
                    name={item.name}
                    imageStyle={{
                        width: USER_HEADER_DIMENSION,
                        height: USER_HEADER_DIMENSION,
                        borderRadius: BORDER_RADIUS_SMALL
                    }}
                />
                <TouchableOpacity
                    onPress={()=> /* not called */}
                    style={{
                        marginLeft: PADDING,
                        flex: 1,
                        backgroundColor: DEFAULT.primary.colorLight,
                        borderRadius: BORDER_RADIUS_SMALL,
                        flexDirection: "row",
                        alignItems: "center",
                        padding: PADDING
                    }}>
                    <Text style={{
                        flex: 1
                    }}>{item.name}</Text>
                    <View
                        style={{
                            width: ICON_DIMENSION_SMALL,
                            height: ICON_DIMENSION_SMALL
                        }}>
                        <ArrowForwardSmall color={TEXT_COLOR_LIGHT}/>
                    </View>
                </TouchableOpacity>
            </View>
        );
    };

还有内容中的FlatList：

<FlatList<Exercise | Recipe>
                style={{
                    height: data.length * (USER_HEADER_DIMENSION + PADDING),
                    width: "100%",
                }}
                scrollEnabled={false}
                bounces={false}
                data={data}
                keyExtractor={((item, index) => item.name + index)}
                renderItem={this.__renderExercise}
            />

BottomSheet：如果我在renderHeader中使用该组件，它将起作用，但在内容中则无效。

<BottomSheet
            enabledInnerScrolling={false}
            snapPoints={[PlanScreenBottomSheetMinHeight, PlanScreenBottomSheetMaxHeight]}
            renderContent={() => RenderContent(day, isWorkoutDay)}
            renderHeader={() => RenderHeader(day, isWorkoutDay)}
        />

Answer 1

您可以显示示例代码或特定文件吗？

另一件事，请确保要从像这样的本机反应中导入TouchableOpacity：

import { TouchableOpacity } from 'react-native';

而不是来自react-native-gesture-handler-

import { TouchableOpacity } from 'react-native-gesture-handler';

反应Native onPress替代

1 个答案: