Реагируйте на альтернативу Native onPress - PullRequest
Новая
       2

Реагируйте на альтернативу Native onPress

0 голосов
/ 09 октября 2019

В настоящее время я работаю с этим 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)}
        />

1 Ответ

1 голос
/ 10 октября 2019

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

И еще одна вещь, убедитесь, что вы импортируете TouchableOpacity из собственного кода реакции, как это: 

import { TouchableOpacity } from 'react-native';

а не из обработчика реакции-нативного жеста - 

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