React-native-gesture-handler: لا يعمل بشكل مشروط

تم إنشاؤها على ١١ أبريل ٢٠١٨  ·  71تعليقات  ·  مصدر: software-mansion/react-native-gesture-handler

مرحبا !
لدي مشكلة صغيرة على Android ، لا يتم تشغيل onGestureEvent عندما تكون مكونات GestureHandler على شكل مشروط على Android. عندما أقوم بتغيير الشكل إلى طريقة العرض ، فإنه يعمل بشكل مثالي

لا مشكلة على iOS

Android Bug Can repro Important

التعليق الأكثر فائدة

حيلة صغيرة لحلها داخل نموذج:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

ال 71 كومينتر

+1
أي حل؟

لا أستخدم Modal في الوقت الحالي ، فأنا فقط أقوم بإعادة إنشائه باستخدام طريقة عرض في وضع مطلق

باستخدام شاشة مشروطة في الوقت الحالي ، بعد البحث في googling والدردشات ، اعتبر Modal من RN الكثير من الأخطاء التي تجرها الدواب

+1

مرحبًا ، martinezguillaume ، mordaha ،csto
لقد ألقيت نظرة على هذه المشكلة وأفترض أنها ليست مسألة مكتبتنا ، ولكن RN Core.

osdnk هل هذا قابل

إيماءة +1 لا تعمل على مشروط

أنا أيضا واجهت هذا الخطأ اليوم.

نفس المشكلة. لا تعمل الإيماءة على الوسائط على Android .
المعرض على سبيل المثال

نفس الشيء بالنسبة لي. تم اختبار معالجات PanResponder الخاصة بالتفاعل الأصلي على الوسائط - وتعمل بشكل جيد.

لدي أفكار حول هذا: عندما نقوم بربط هذه المكتبة بمشروع android ، فإننا نقوم بالخطوة التالية

<strong i="7">@Override</strong>
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }

ونعلم أن الوسائط هي حزمة منفصلة. قد يكون من المنطقي أن تفعل الشيء نفسه معها؟

كنت أستخدم معيار React Native Modal وكنت أواجه هذه المشكلة.
لقد عملت على حل المشكلة من خلال إنشاء شاشة جديدة وعرضها كوسائط. أنا أستخدم التنقل التفاعلي الأصلي ، لذلك:

Navigation.showModal({
    component: {
      name: navRoutes.ImageModal,
      passProps: { image },
    },
  })

تعمل الإيماءات كما هو متوقع على كل من iOS و Android ، وما زلت أحصل على خلفية شفافة أردتها من النموذج الأصلي الخاص بي.

لقد حفرت فيه لفترة من الوقت.

  1. إنها مشكلة RNGH. آسف 😒
  2. يحدث أن لا يتم عرض مشروط bc أسفل عرض الجذر RN.
  3. إنه قابل للإصلاح عن طريق استبدال آلية الوسائط بطريقة مماثلة كما نفعل مع RNRootView من خلال تغليفها ببعض المنطق الإضافي. راجع https://github.com/kmagiera/react-native-gesture-handler/blob/master/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java
  4. ليس لدي وقت للقيام بذلك الآن ، إنه عمل يستغرق وقتًا طويلاً وربما يتطلب نسخ بعض التعليمات البرمجية في RNGH الأساسية على الجانب الأصلي من Android.

إذا أراد شخص ما القيام بذلك وكان لديه الوقت الكافي ، فسأقوم بمراجعته ودمجه على الفور إذا كان قابلاً للتطبيق وليس اختراقًا شديدًا.

martinezguillaumemordahacsto @ المريخ الشبكة المحليةParhamZareewendel @ عن طريق ربحDmitryloloLaVielle

أيضًا ، لقد أجريت تجربة منذ شهرين.

https://github.com/kmagiera/react-native-gesture-handler/commit/139da18039683bed3c439c991c7eaf802086bf86

ربما يمكن أن يكون مصدر إلهام لشخص ما

مرحبًا osdnk ، أحتاج إلى هذه الميزة
كما أنني كنت أنظر إلى محاولتك السابقة ، وأود أن أعرف ما هو مفقود حتى يتم الانتهاء منها ، وما إذا كان يمكن استخدامها كنقطة بداية.

نفس الخطأ.

kmagieraosdnk أي تحديث على ذلك؟
حتى Touchable* لا تعمل داخل النموذج وهذا أمر محبط

+1. أستخدم الورقة السفلية المنعشة مع الوسائط

أي تحديثات؟ أو ربما أي مكون شكلي آخر لا يعاني من هذه المشكلة؟ يعمل نموذج RN بشكل سيء تمامًا ومليء بالأخطاء (مثل التعثر إذا تم دمجه مع تنبيه)

cristianoccazinsp انتهى بي الأمر باستخدام https://github.com/react-native-community/react-native-modal

غريب. من المفترض أن يستخدم هذا المكون وسائط التفاعل داخليًا. فعلتها
تحدث فرقا لك؟

El jue.، 30 de Mayo de 2019 14:38، Mars Lan [email protected]
escribió:

cristianoccazinsp https://github.com/cristianoccazinsp انتهى بي الأمر
باستخدام https://github.com/react-native-community/react-native-modal

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/kmagiera/react-native-gesture-handler/issues/139؟email_source=notifications&email_token=ALU263ACF3LNSRSPFWR45ELPYAGJTA5CNFSM4EZ6UZL2YY3PNVWWK3TUL52HS4DFVREXG43TUL52HS4DFVREXG43
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ALU263GRH2KHBXUZBGHNKA3PYAGJTANCNFSM4EZ6UZLQ
.

cristianoccazinsp يستخدم فقط coverScreen إلى false

cristianoccazinsp يستخدم فقط coverScreen إلى false

ولكن هل هناك طريقة لإظهار صيغة ملء الشاشة باستخدام هذه الخاصية التي لم يتم عرضها في مكون الجذر للتطبيق؟

jvaclavik استخدمته بالتزامن مع https://github.com/callstack/react-native-paper ، والذي يحتوي على مكون يسمى Portal مصمم خصيصًا لهذا الغرض.

قد لا يؤدي هذا إلى حل جميع حالات الاستخدام ولكن يمكنك تمكين الإيماءات في رد الفعل الشرطي الأصلي عند تعيين الخاصية prop propagateSwipe على true.

يبدو أن هذه المشكلة مرتبطة بـ https://github.com/kmagiera/react-native-screens/issues/61

لا تستخدم الشاشات الأصلية في نظام Android. تم اختباره والعمل بشكل جيد مع "الطبقة السفلية المعاد تنشيطها"

إذا (Platform.OS === 'ios') {
useScreens () ؛
}

إن تهيئة React Navigation Modal لـ bg الشفافة هي

ScreenOne: {
الشاشة: ScreenOne ،
navigationOptions: {
إيماءات ممكّنة: خطأ
} ،
}
{
الوضع: "مشروط" ،
بطاقة شفافة: صحيح ،
headerMode: "لا شيء"،
نمط البطاقة: {
backgroundColor: "شفافة" ،
العتامة: 1
} ،
TransConfig: () => ({
نمط الحاوية: {
backgroundColor: "شفافة" ،
}
})
}

osdnk إصلاحه؟

كان هذا مؤلمًا جدًا.
لقد أمضيت بعض الوقت قبل الحل في google ، واسحب شعري إلى الخارج في محاولة لمعرفة السبب في أن نفس المكون يعمل على iOS و android ولكن فقط في بعض الأماكن داخل التطبيق

لدينا نفس المشكلة - إنها لا تعمل على الوسائط.
أتساءل عما إذا كان أي شخص يعمل على هذا أو يعرف أي تحديث للحالة؟
هل نحتاج إلى ترك هذه المكتبة والتحول إلى معالجات عموم RN؟
أي اقتراح ؟

نفسه هنا. لا يعمل RectButton داخل https://github.com/react-native-community/react-native-modal

MustafaHosny اللهم امين يارب
ستوفر لك بعض الوقت ، لا الحزم القائمة على Modal ولا الحزم المستندة إلى Modal (إذا لم تطلب منك ربط التبعيات الأصلية - فهي تستند إلى react-native 's Modal سيساعدك
لن تسجل جميع المكونات ذات الصلة بـ gesture- (سلوك الورقة السفلية بالنسبة لنا) أي لمسات / الضربات الشديدة وما إلى ذلك عند عرضها داخل <Modal>...</Modal> على android ؛
هناك 3 حلول يمكنني التفكير فيها:

  1. استخدم أي مكتبة أخرى إذا كنت تستخدم الوسائط. قد تحتاج إلى إعادة كتابة بعض المكونات القائمة على التمرير السريع إلى PanResponder ؛ هذا هو الألم ، ولكنه بسيط جدًا ؛
  2. استخدم النماذج التي هي portals . إنها ليست في الواقع بوابات ولا شكليات - لا يتم دعم البوابات بواسطة تفاعل أصلي نظرًا لوجود مضيف تطبيق واحد - لكنهم يعملون عن طريق وضع مكون المضيف في مكان ما فوق التطبيق الخاص بك ويعرض المحتوى الشرطي في العرض المطلق أعلى مكدس التطبيقات ؛ هذا الحل يعمل ، لكنك ستفقد أي مكالمات useContext() بسبب الأطفال الذين يتم تقديمهم فوق موفري السياق ؛ لا يعمل معنا ، حيث يتم فقد السياق navigation ؛
  3. استخدام النماذج التي توفرها مكتبة التنقل ( react-navigation ) ؛ هذا يعمل ، لكن API ... ليس جيدًا - بالنسبة لشخص لا يمكنك جعل شاشة واحدة مشروطًا ، فقط المكدس يمكن أن يكون في الوضع الشرطي ؛ هذا هو الحل الذي ألتزم به.

حسنًا ، هناك حل نهائي - تصحيح تطبيق android الأصلي (غير ممكن إذا كنت تستخدم المعرض) أو انتظر التصحيح في مكتبة ثم انتظر حتى يتم دمجه في المعرض.

ملاحظة
لا تفهموني بشكل خاطئ ، فهذه المكتبة مذهلة ، ولا يمكنني التأكيد بما فيه الكفاية على مقدار ما أقدره من العمل الذي يتم سكبه في هذا ومدى أفضل تجربة للمستخدم النهائي ، ولكن مثل هذه الأخطاء تجعلني أرغب في سحب شعري.

تتطلب بعض المكتبات منا التعامل مع السياق الأصلي ، إذا كان الأمر كذلك:

بالنسبة لنظام Android ، سنحتاج إلى عناية خاصة كما هو مذكور في مستند RNGH :

قم بتحديث ملف MainActivity.java
Screen Shot 2019-11-30 at 12 17 07 PM

آمل أن يساعد

تتطلب بعض المكتبات منا التعامل مع السياق الأصلي ، إذا كان الأمر كذلك:

بالنسبة لنظام Android ، سنحتاج إلى عناية خاصة كما هو مذكور في مستند RNGH :

قم بتحديث ملف MainActivity.java
Screen Shot 2019-11-30 at 12 17 07 PM

آمل أن يساعد

نعم ، هذا عمل بشكل مثالي بالنسبة لي. كدت أشعر بالإحباط من البحث عن حلول لجعل تطبيق Android الخاص بي قابلاً للتمرير السريع.

لا يزال لا يعمل
إذا تم تغيير الوضع لعرض كل شيء يعمل على ما يرام ...

مرحبًا romanonthego ،

حسنًا ، هناك حل نهائي - تصحيح تطبيق android الأصلي (غير ممكن إذا كنت تستخدم المعرض) أو انتظر التصحيح في مكتبة ثم انتظر حتى يتم دمجه في المعرض.

هل يمكنك إخباري بما يجب تصحيحه جنبًا إلى جنب مع رمز Android الأصلي الخاص بي؟

osdnk هذا مثير. هل ستعمل مع DialogFragment أيضًا؟

بعد تجربة # 937 اكتشفت أنه لا يعمل معي ...

ربما لأنني أستخدم التنقل الأصلي في wix؟ بقدر ما أعرف ، يتم تسجيل كل شاشة باستخدام إيماءة HandlerRootHOC (تعمل المكتبة بشكل مثالي مع طرق العرض العادية غير المشروطة).

هذا جزء من الشاشة التي جربت فيها زر RectButton في شكل مشروط (بشكل أساسي كما هو الحال في تحديث المستند)

  renderSearchScreen = () => {
    const { showSearchHistory } = this.state;
    const ExampleWithHoc = gestureHandlerRootHOC(() => {
      return (
        <View style={genericStyles.container}>
          <SearchScreen
            searchBar={{
              ...this.searchBar,
              searchQuery: this.props.searchQuery,
            }}
            onBackPress={() => {
              this.setState({ showSearchHistory: false });
            }}
          />
        </View>
      );
    });

    if (showSearchHistory) {
      return (
        <RNModal
          animationType="fade"
          transparent
          visible={this.state.showSearchHistory}
          onRequestClose={() => {}}>
          <ExampleWithHoc />
        </RNModal>
      );
    }

    return null;
  };

يتم تحميل الوسائط عندما يكون من المفترض أن يتم ذلك ، لكن الزر RectButton لا يطلق حدث onPress. حاولت إنشاء عرض توضيحي قابل للتكرار على الأقل باستخدام تطبيق جديد تمامًا ، لكنني واجهت بعد ذلك # 848 # 676 # 835 (تكرارات محتملة لبعضها البعض).

whop # 937

هذا مذهل! لا يزال لا يعمل مع react-native-modal بالنسبة لي ، رغم ذلك!

_ // تحرير: في الواقع ، لا يعمل الوضع الافتراضي أيضًا ، ولكن يجب أن يبدأ من 1.6.0 إذا لم أكن مخطئًا ؟ سنحاول اكتشاف الخطأ_

لقد لعبت حولها قليلاً وتمكنت من العثور على المشكلة. ومع ذلك ، لست متأكدًا من سبب ذلك وكيفية إصلاحه.

المشكلة في قضيتي، وأنني react-native-gesture-handler لن تعمل داخل @react-navigation/stack ، إذا وضعت داخل مشروط (وذلك أساسا Stack.Navigator > SomeScreenComponent > Modal > gestureHandlerRootHOC(PanGestureHandler) فشل).

إذا قمت بقص Stack Navigator أو استخدمت Tab Navigator بدلاً من ذلك ، فإنه يعمل مثل السحر ، لذلك أنا متأكد من أنه خطأ Stack Navigators.

إصدارات الحزمة ذات الصلة:

[email protected]
@react-navigation/[email protected]
@react-navigation/[email protected]

سأحاول إعداد ريبو تجريبي في أسرع وقت ممكن ، اسمحوا لي أن أعرف ما إذا كان بإمكاني تقديم أي معلومات مفيدة أخرى.

إليك تطبيق تجريبي لـ (فارغ تقريبًا من npx react-native init ) ، والذي سيعرض المشكلة. يمكنك تبديل متصفح المكدس داخل التطبيق ومعرفة كيف يصبح PanGestureHandler وظيفيًا وغير فعال.

https://github.com/mxmzb/react-native-breakable-app

عندى نفس المشكلة. يبدو أن Stack.Navigator لا يعمل بشكل جيد على Android. لا يهم إذا كنت أستخدم الوضع = "مشروط" أو "بطاقة".

لذلك كنت ألعب وكان لدي الكود التالي

import { SafeAreaView, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'

import { enableScreens } from 'react-native-screens';
enableScreens(); // <-- this fucked it up

const Screen1 = ({ navigation }) => {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Open Modal" onPress={() => navigation.push('Modal')} />
      </SafeAreaView>
    )
  }

  const Screen2 = ({ navigation }) => {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Close Modal" onPress={() => navigation.goBack()} />
      </SafeAreaView>
    )
  }

const App = () => {

return (
        <NavigationContainer>
          <Stack.Navigator headerMode="none">
            <Stack.Screen name="Main" component={Screen1} />
            <Stack.Screen name="Modal" component={Screen2} />
          </Stack.Navigator>
        </NavigationContainer>
  )

}

ثم أزلت هذا الخط.
enableScreens();

ثم عملت بشكل صحيح على Android.

حيلة صغيرة لحلها داخل نموذج:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

لدي مشكلة مماثلة. أي عمل حولها؟

كنت أحاول استخدام https://github.com/osdnk/react-native-reanimated-bottom-sheet داخل نموذج ، وهذا غير ممكن ، لقد حللت أخيرًا باستخدام الرسوم المتحركة لشاشة رد الفعل والملاحة:

https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/143#issuecomment -614300015

حيلة صغيرة لحلها داخل نموذج:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

يا gideaoms . أتساءل كيف ذهب تعليقك دون أن يلاحظه أحد هنا. بالتأكيد يفعل الحيلة. شكرا يا رجل!

إليك تطبيق تجريبي لـ (فارغ تقريبًا من npx react-native init ) ، والذي سيعرض المشكلة. يمكنك تبديل متصفح المكدس داخل التطبيق ومعرفة كيف يصبح PanGestureHandler وظيفيًا وغير فعال.

https://github.com/mxmzb/react-native-breakable-app

اذن ما الحل؟

ما زلت أواجه نفس المشكلة ....
أي حل أو لا شيء بعد؟

لا تزال هذه مشكلة في 1.6.0

جربت كل الاقتراحات المذكورة أعلاه ولكن لم يحالفك الحظ حتى الآن. الرجاء المساعدة ، إنه محبط حقًا.
تم تجربة الإصدار الأصلي الخاص بي في 0.62.2 باستخدام كل من / response-native-gesture-handler 1.5.6 و 1.6.0.

لا تزال مشكلة على ^1.7.0

ما زالت لا تعمل: -1:

نستخدم wix-navigation. ربما شيء متعلق؟

حسنًا ، لقد وجدت حلاً ممكنًا ، إنه يفعل بالضبط ما نريده ويعمل لكل من iOS و Android.

https://www.youtube.com/watch؟v=tLQjGHDiRkM

@ steniowagner هل هذا مثل نموذج مخصص؟ لا أوصي به
ما عليك سوى الانتقال مع التنقلات التفاعلية أو المكدس الأصلي ، فهو يعمل معها بشكل جيد.

حسنًا ، لم يتم الاختبار باستخدام التنقلات التفاعلية (بدا الأمر كثيرًا بالنسبة لحالتي) ، ولكن ربما تكون أفضل طريقة في الوقت الحالي.

شكرا لك @ a-eid!

بحسب الوثائق
https://docs.swmansion.com/react-native-gesture-handler/docs/#usage -with-modals-on-android

لكن ما زلت لا تعمل من أجلي.

gideaoms قد تعمل الحيل مع الزر ولكن حالة الاستخدام الخاصة بي هي استخدام PinchGestureHandler داخل النموذج.

حيلة صغيرة لحلها داخل نموذج:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

هذه المشكلة عمرها أكثر من عامين ، فهل هناك أي خطط لإصلاح ذلك؟

لقد أنشأت مكونات Slider مخصصة لتطبيقي ولا يمكنني استخدامها على الإطلاق على Android ، نظرًا لأن الكثير من طرق العرض في تطبيقي عبارة عن وسائط

لقد قمت بلف كل شاشة ومكوِّن مشروط في gestureHandlerRootHoC (باستخدام wix / response-native-navigation)

لقد حاولت تغليف كل من الشاشة والمكون بـ gestureHandlerRootHoc دون جدوى. لم أجرب أسلوب RectButton لأنني أحتاج إلى PanGestureHandler لتنفيذ سلوك التمرير السريع لأسفل للرفض على النموذج. إنه أمر محبط لأنه يعمل بشكل مثالي على نظام التشغيل iOS ، وبما أنني أستخدم react-native-modal ، والذي يأتي بالفعل مع ميزة التمرير السريع للتجاهل خارج الصندوق ، فقد حاولت استخدام هذا النهج بدلاً من ذلك و إنه يعمل طالما لم يكن لديك محتوى قابل للتمرير داخل النموذج لأنه بعد ذلك يكون عربات التي تجرها الدواب على كل من iOS و Android ، لذلك أنا عالق نوعًا ما ...

لنلخص:

  1. ❌ RNGH لا يعمل في react-native الصورة <Modal> العنصر (على الرغم من أن يتم تغليف مكون في gestureHandlerRootHOC )
  2. ✅ يعمل RNGH في شاشة من wix/react-native-navigation التي تظهر باستخدام Navigation.showModal (على الرغم من أن الشاشة ملفوفة في gestureHandlerRootHOC )
  3. يبدو أن ✅ RNGH يعمل إذا تم عرضه باستخدام وظيفة الدفع react-navigation مع modal: true ، ولكن فقط عند عدم استخدام المكدس الأصلي ( enableScreens() / createNativeStackNavigator() ).

يمكنني تقديم مزيد من التفاصيل إذا لزم الأمر.

تفاعل - أصلي - مشروط - رسوم متحركة يعمل مع معالج إيماءات رد فعل أصلي ، لأن رد فعل أصلي - مشروط - متحرك ينشئ مشروطًا فقط باستخدام طريقة عرض.

flyskywhy إذا كان رد فعل - أصلي - مشروط - متحرك لا يستخدم نشاطًا منفصلاً مثل رد فعل أصلي مشروط ، فكيف يتم عرضه فوق كل شيء؟ إذا كان يستخدم موقعًا مطلقًا ، فقد يتسبب في مشكلة في بعض الحالات.

@ waheedakhtar694 ، إنها تستخدم المطلق. على الأقل في حالتي ، لا توجد مشكلة: عالق في حالتي: stuck_out_tongue_closed_eyes:

jvaclavik استخدمته بالتزامن مع https://github.com/callstack/react-native-paper ، والذي يحتوي على مكون يسمى Portal مصمم خصيصًا لهذا الغرض.

تم حلها باستخدام Portal من ورق رد الفعل الأصلي كما قال jvaclavik .
لقد قمت بلف تطبيقي باستخدام ولفتها باستخدام Portal.
تعمل الورقة السفلية الآن على Android 😍

_EDIT: لسبب ما تعمل إيماءات عموم ولكن onPress الأحداث لا تعمل (ولكن يظهر تموج) ...
تعديل 2: كانت هذه مشكلة في المكتبة التي استخدمتها ، لقد أصلحتها بتغيير الواردات الملموسة من "رد فعل أصلي" إلى "رد فعل أصلي-معالج إيماءة" _

إليك بعض التعليمات البرمجية التي يمكنك تجربتها

/*
 App.js:
 - import { Provider as PaperProvider } from "react-native-paper";
 - wrap your App with PaperProvider
*/

// ModalFixed.js
import { Portal } from 'react-native-paper';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

const ModalFixed = (props) => {
  <View style={styles.modal}>
    <View style={styles.shadow} />
    {/* MODAL CONTENT HERE, you can put props.children to reuse this component */}
  </View>
}

const styles = StyleSheet.create({
  modal: {
    width: "100%",
    height: "100%"
  },
  shadow: {
    position: "absolute",
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0,0,0,0.3)",
  }
})

const _ModalFixed = gestureHandlerRootHOC(SheetPopup)
export default (props) => {
  return (
    <Portal>
      <_ModalFixed {...props} />
    </Portal>
  )
}

العمل بالنسبة لي:
<TouchableWithoutFeedback onPress={() => { console.log("press"); }} > <Text> <RectButton> ... </RectButton> </Text> </TouchableWithoutFeedback>

أي تحديث على هذا؟ لدينا مشروعان يعمل فيهما نظام iOS كما هو متوقع ولكن نماذج Android تثبت وجود مشكلة. نفضل ألا نضطر إلى إزالة النماذج من المشاريع ... هذا إصلاح كبير للتصميم. : /

DavidAPears هل حاولت gestureHandlerRootHOC ؟

شيء من هذا القبيل ؟


const ModalInner = gestureHandlerRootHOC(function GestureExample() {
  return (
    <View>
      { RNGH components . }
    </View>
  );
});

export default function ModalForX() {
  return (
    <Modal animationType="slide" transparent={false}>
      <ModalInner />
    </Modal>
  );
}


مزيج من Portal من react-native-portalize و gestureHandlerRootHOC يعمل بالنسبة لي. شئ مثل هذا:

<Portal>
   <Modal>
      <GestureHandlerRootHOCWrappedComponent />
   </Modal>
</Portal>

إعداد coverSreen = {false} على الأعمال المشروطة. لكنني بحاجة إلى غطاء مشروط للشاشة

استيراد {Platform، Modal} من "رد فعل أصلي"؛
استيراد {GestureHandlerRootHOC} من "reaction-native-gesture-handler" ؛
استيراد {AnimatedBottomSheet} من '../AnimatedBottomSheet' ؛

const AnimatedBottomSheetWrapper = Platform.OS === 'android'؟ GestureHandlerRootHOC (AnimatedBottomSheet): AnimatedBottomSheet ؛

لست متأكدًا مما إذا كان هذا سيساعد شخصًا ما ، فقد واجهت أيضًا مشكلات في استخدام هذه المكتبة مع رد فعل أصلي مشروط ، ولكن بجانب التفاف الأطفال للإيماءات المشروطة = صحيح وعند كل ضغطة على مفتاح ، كانت لوحة المفاتيح تغلق) لذا الشيء الوحيد الذي فعلته هو غلاف الأطفال المشروط ، شيء من هذا القبيل:

import Modal from 'react-native-modal';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

const GestureHandlerWrapper = gestureHandlerRootHOC(
  ({ children }) => <View>{children}</View>,
  { flex: 0 }
);

export const CustomModal: React.FC<Props> = ({
  children,
...rest
}) => {
  return (
    <Modal
      {...rest}
    >
      <GestureHandlerWrapper>    
          {children} 
      </GestureHandlerWrapper>
    </Modal>
  );
};
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات