React-native-gesture-handler: Tidak bekerja di sebuah modal

Dibuat pada 11 Apr 2018  ·  71Komentar  ·  Sumber: software-mansion/react-native-gesture-handler

Hai!
Saya memiliki sedikit masalah di Android, onGestureEvent tidak terpicu saat komponen GestureHandler menggunakan modal di Android. Saat saya mengubah modal menjadi View, ini bekerja dengan sempurna 👌

Tidak masalah di iOS

Android Bug Can repro Important

Komentar yang paling membantu

Trik kecil untuk menyelesaikannya di dalam modal:

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

Semua 71 komentar

+1
ada solusi?

Saya tidak menggunakan Modal untuk saat ini, saya hanya membuatnya kembali dengan View dalam posisi absolut

menggunakan layar modal untuk saat ini, setelah googling dan obrolan Modal dari RN dianggap terlalu banyak buggy

+1

Hai, @martinezguillaume , @mordaha , @csto
Saya telah melihat masalah ini dan saya kira ini bukan masalah perpustakaan kami, tetapi RN Core.

@osdnk apakah ini bisa diperbaiki?

Isyarat +1 tidak berfungsi pada modal

Saya juga mengalami bug ini hari ini.

Permasalahan yang sama. Gestur tidak berfungsi pada modal di Android .
Expo misalnya

Sama untuk ku. Penangan PanResponder react-native yang diuji pada modal - berfungsi dengan baik.

Saya memiliki pemikiran tentang ini: ketika kami menautkan perpustakaan ini ke proyek android, kami melakukan langkah selanjutnya

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

Dan kita tahu bahwa modal adalah paket terpisah. Mungkinkah masuk akal untuk melakukan sesuatu yang sama dengannya?

Saya menggunakan React Native standar Modal dan mengalami masalah ini.
Saya mengatasi masalah dengan membuat layar baru dan menampilkannya sebagai modal. Saya menggunakan react-native-navigation , jadi:

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

Gestur berfungsi seperti yang diharapkan di iOS dan Android, dan saya masih mendapatkan latar belakang transparan yang saya inginkan dari modal asli saya.

Saya telah menggalinya untuk sementara waktu.

  1. Ini masalah RNGH. Maaf 😒
  2. Itu terjadi bc modals tidak dirender di bawah tampilan root RN.
  3. Ini bisa diperbaiki dengan mengganti mekanisme modals dengan cara yang sama seperti yang kita lakukan dengan RNRootView dengan membungkusnya dengan beberapa logika tambahan. Lihat https://github.com/kmagiera/react-native-gesture-handler/blob/master/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java
  4. Saya tidak punya waktu untuk melakukannya sekarang, ini pekerjaan yang memakan waktu dan mungkin perlu menyalin beberapa kode dalam inti RNGH di sisi asli Android.

Jika seseorang ingin dan punya waktu untuk melakukannya, saya akan dengan senang hati memeriksanya dan segera menggabungkannya jika bisa diterapkan dan tidak terlalu hacky.

@martinezguillaume @mordaha @csto @ mars-lan @ParhamZare @ewendel @ Via-profit @Dmitrylolo @LaVielle

Juga, saya sudah mencobanya dua bulan lalu.

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

Mungkin bisa jadi inspirasi buat seseorang 🤷‍♂️

Hai @osdnk, saya memerlukan fitur ini untuk aplikasi saya, jadi saya berpikir saya bisa mencobanya, tetapi saya tidak memiliki banyak pengalaman dengan RNGestureHandler, atau dengan Android. Bisakah Anda memberi saya lebih banyak wawasan tentang apa yang perlu saya lakukan untuk membuatnya berhasil?
Juga saya melihat percobaan Anda sebelumnya, dan saya ingin tahu apa yang kurang untuk diselesaikan, dan apakah itu dapat digunakan sebagai titik awal.

kesalahan yang sama.

@kmagiera @osdnk ada pembaruan tentang ini?
bahkan Touchable* tidak berfungsi di dalam modal dan ini membuat frustrasi

+1. saya menggunakan reanimated-bottom-sheet dengan modal

Ada pembaruan? Atau mungkin, komponen modal lain yang tidak mengalami masalah ini? Modal RN benar-benar berfungsi seperti sangat buruk dan penuh dengan bug (seperti macet jika dikombinasikan dengan peringatan)

@cristianoccazinsp Saya akhirnya menggunakan https://github.com/react-native-community/react-native-modal

Aneh. Komponen itu seharusnya menggunakan modal react secara internal. Melakukannya
membuat perbedaan untukmu?

El jue., 30 Mei 2019 14:38, Mars Lan [email protected]
escribió:

@cristianoccazinsp https://github.com/cristianoccazinsp Saya akhirnya
menggunakan https://github.com/react-native-community/react-native-modal

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/kmagiera/react-native-gesture-handler/issues/139?email_source=notifications&email_token=ALU263ACF3LNSRSPFWR45ELPYAGJTA5CNFSM4EZ6UZL2YY3PNVXHJK3TUL52HS4DFVVRXGWZK3TUL52HS4DFVVRXGWZ492HS4DFVVBVSGW3TUL52HS4DFVVRXGW743
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ALU263GRH2KHBXUZBGHNKA3PYAGJTANCNFSM4EZ6UZLQ
.

@cristianoccazinsp Ini hanya menggunakan modal RN untuk menutupi layar, yang dapat dinonaktifkan dengan menyetel coverScreen menjadi false

@cristianoccazinsp Ini hanya menggunakan modal RN untuk menutupi layar, yang dapat dinonaktifkan dengan menyetel coverScreen menjadi false

Tetapi adakah cara untuk menampilkan modal layar penuh dengan prop ini yang tidak dirender di komponen root aplikasi?

@jvaclavik Saya menggunakannya terkait dengan https://github.com/callstack/react-native-paper , yang memiliki komponen bernama Portal yang dirancang khusus untuk tujuan ini.

Ini mungkin tidak menyelesaikan semua kasus penggunaan tetapi Anda dapat mengaktifkan isyarat di react native modal saat menyetel prop propagateSwipe ke true.

Masalah ini tampaknya terkait dengan https://github.com/kmagiera/react-native-screens/issues/61

Jangan gunakan layar react native di android. Diuji dan berfungsi dengan baik dengan 'reanimated-bottom-sheet'

if (Platform.OS === 'ios') {
useScreens ();
}

Konfigurasi React Navigation Modal ini untuk bg transparan adalah

ScreenOne: {
layar: ScreenOne,
navigationOptions: {
gesturesEnabled: salah
},
}
{
mode: 'modal',
transparentCard: true,
headerMode: 'tidak ada',
cardStyle: {
backgroundColor: 'transparan',
opacity: 1
},
transisiConfig: () => ({
containerStyle: {
backgroundColor: 'transparan',
}
})
}

@osdnk memperbaikinya?

Yang ini sangat menyakitkan.
Saya telah menghabiskan beberapa waktu sebelum memutuskan untuk meng-google-nya, mencoba mencari tahu mengapa komponen yang sama berfungsi di iOS dan di android tetapi hanya di beberapa tempat di dalam aplikasi

kami memiliki masalah yang sama - tidak berfungsi pada modal.
saya ingin tahu apakah ada yang mengerjakan ini atau mengetahui pembaruan status?
apakah kita perlu melepaskan pustaka ini dan beralih ke penangan pan RN?
ada saran ?

Sama disini. RectButton tidak berfungsi di dalam https://github.com/react-native-community/react-native-modal

@defloremarului @
Akan menyisihkan waktu untuk Anda, baik paket berbasis Modal , maupun Modal (jika mereka tidak mengharuskan Anda untuk menautkan dependensi asli - paket tersebut didasarkan pada react-native 's Modal ) akan membantu Anda (pada dasarnya saya sudah mencoba semuanya).
Semua komponen terkait gesture- (perilaku lembar bawah untuk kami) tidak akan mendaftarkan sentuhan / gesekan apa pun dll ketika dirender di dalam <Modal>...</Modal> di android;
Ada 3 solusi yang dapat saya pikirkan:

  1. Gunakan pustaka lain jika Anda menggunakan modals. Anda mungkin perlu menulis ulang beberapa komponen berbasis swipe menjadi PanResponder ; ini menyakitkan, tapi cukup mudah;
  2. Gunakan modals yaitu portals . Mereka sebenarnya bukan portal atau modals- portal tidak didukung oleh react-native karena hanya ada satu aplikasi host - tetapi mereka bekerja dengan menempatkan Host Component di suatu tempat di aplikasi Anda dan membuat konten Modal dalam tampilan absolut di atas tumpukan aplikasi; yang satu ini adalah solusi yang berfungsi, tetapi Anda akan kehilangan panggilan useContext() karena turunan diberikan di atas penyedia konteks; tidak bekerja untuk kami, karena navigation konteks hilang;
  3. Gunakan modals yang disediakan oleh perpustakaan navigasi ( react-navigation ); yang satu ini berfungsi, tetapi API ... tidak bagus - untuk yang satu ini Anda tidak dapat menjadikan satu layar sebagai modal, hanya tumpukan yang dapat berada dalam mode modal; ini adalah solusi yang saya gunakan.

Nah, ada solusi terakhir - tambal implementasi Android asli (tidak mungkin jika Anda menggunakan expo) atau tunggu tambalan di perpustakaan dan kemudian tunggu sampai itu digabungkan ke dalam pameran.

ps
Jangan salah paham, perpustakaan ini luar biasa, dan saya tidak bisa cukup menekankan betapa saya menghargai pekerjaan yang dicurahkan ke dalamnya dan betapa jauh lebih baik pengalaman bagi pengguna akhir, tetapi bug seperti ini membuat saya ingin menarik perhatian saya.

Beberapa perpustakaan mengharuskan kita menangani konteks asli, jika demikian:

Untuk android, kami memerlukan perawatan khusus seperti yang tercantum dalam dokumen RNGH :

Perbarui file MainActivity.java
Screen Shot 2019-11-30 at 12 17 07 PM

Semoga membantu

Beberapa perpustakaan mengharuskan kita menangani konteks asli, jika demikian:

Untuk android, kami memerlukan perawatan khusus seperti yang tercantum dalam dokumen RNGH :

Perbarui file MainActivity.java
Screen Shot 2019-11-30 at 12 17 07 PM

Semoga membantu

Ya, ini bekerja dengan sempurna untuk saya. Saya hampir frustrasi mencari solusi untuk membuat aplikasi Android saya dapat digeser.

masih tidak bekerja
jika mengubah modal untuk melihat semuanya berfungsi dengan baik ...

Halo @romanonthego ,

Nah, ada solusi terakhir - tambal implementasi Android asli (tidak mungkin jika Anda menggunakan expo) atau tunggu tambalan di perpustakaan dan kemudian tunggu sampai itu digabungkan ke dalam pameran.

Bisakah Anda memberi tahu saya apa yang harus ditambal di sisi kode Android asli saya?

@OSSENI mengasyikkan. Akankah itu bekerja dengan DialogFragment juga?

Setelah mencoba # 937 saya menemukan itu tidak berhasil untuk saya ...

Mungkin karena saya menggunakan navigasi react-native-wix? Sejauh yang saya tahu masing-masing dan setiap layar terdaftar dengan gestureHandlerRootHOC (perpustakaan bekerja sempurna dengan tampilan normal, non modal).

Ini adalah bagian dari layar tempat saya mencoba RectButton dalam Modal (pada dasarnya seperti yang ada di pembaruan dokumen)

  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;
  };

Modal dimuat saat seharusnya, tetapi RectButton tidak mengaktifkan acara onPress. Saya mencoba membuat demo minimum yang dapat direproduksi dengan aplikasi baru tetapi kemudian saya menemukan # 848 # 676 # 835 (kemungkinan duplikat satu sama lain).

whop # 937

Itu luar biasa! Namun, itu masih tidak berhasil dengan react-native-modal untuk saya!

_ // edit: Sebenarnya, modal default juga tidak berfungsi, tetapi seharusnya, mulai dari 1.6.0 jika saya tidak salah ? Akan mencoba mencari tahu apa yang salah_

Saya telah bermain-main sedikit dan dapat menemukan masalahnya. Namun, saya tidak yakin apa yang menyebabkannya dan bagaimana cara memperbaikinya.

Masalah dalam kasus saya adalah, bahwa saya react-native-gesture-handler tidak akan bekerja di dalam @react-navigation/stack , jika ditempatkan di dalam modal (jadi pada dasarnya Stack.Navigator > SomeScreenComponent > Modal > gestureHandlerRootHOC(PanGestureHandler) gagal).

Jika saya memotong Stack Navigator atau menggunakan Tab Navigator, ini berfungsi seperti pesona, jadi saya cukup yakin itu adalah kesalahan Stack Navigator.

Versi paket yang relevan:

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

Saya akan mencoba menyiapkan repo demo secepatnya, beri tahu saya jika saya dapat memberikan info yang lebih berguna.

Berikut adalah aplikasi demo ke (hampir kosong dari npx react-native init ), yang akan menampilkan masalah. Anda dapat mengaktifkan stack navigator di dalam aplikasi dan melihat bagaimana PanGestureHandler menjadi berfungsi dan tidak berfungsi.

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

Saya memiliki masalah serupa. Tampaknya Stack.Navigator tidak berfungsi dengan baik di Android. Tidak masalah jika saya menggunakan mode = "modal" atau "card".

Jadi saya bermain-main dan memiliki kode berikut

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>
  )

}

Kemudian saya menghapus baris ini;
enableScreens();

Dan kemudian berfungsi dengan benar di Android.

Trik kecil untuk menyelesaikannya di dalam modal:

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

Saya mengalami masalah serupa. Ada pekerjaan di sekitar?

Saya mencoba menggunakan https://github.com/osdnk/react-native-reanimated-bottom-sheet di dalam modal, dan itu tidak mungkin, saya akhirnya menyelesaikannya dengan animasi layar navigasi-reaksi:

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

Trik kecil untuk menyelesaikannya di dalam modal:

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

Hei @ideo . Saya ingin tahu bagaimana komentar Anda tidak diperhatikan di sini. Itu pasti berhasil. Terima kasih sobat!

Berikut adalah aplikasi demo ke (hampir kosong dari npx react-native init ), yang akan menampilkan masalah. Anda dapat mengaktifkan stack navigator di dalam aplikasi dan melihat bagaimana PanGestureHandler menjadi berfungsi dan tidak berfungsi.

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

lalu apa solusinya?

Saya masih mengalami masalah yang sama ....
Ada solusi yang belum Anda miliki?

Ini masih menjadi masalah di 1.6.0

Mencoba setiap saran yang disebutkan di atas tetapi masih belum berhasil. Tolong bantu itu benar-benar membuat frustrasi.
Versi react native saya di 0.62.2 mencoba dengan / react-native-gesture-handler 1.5.6 & 1.6.0.

masih masalah pada ^1.7.0

Masih tidak berfungsi: -1:

Kami menggunakan navigasi wix. Mungkin sesuatu yang berhubungan?

Yah, saya menemukan solusi yang mungkin, itu persis seperti yang kita inginkan dan bekerja untuk iOS dan Android.

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

@steniowagner apakah itu seperti modal khusus? Saya tidak akan merekomendasikannya
cukup gunakan modal react-navigations atau native-stack, itu berfungsi dengan baik.

hmm, tidak menguji dengan navigasi reaksi (kedengarannya terlalu berlebihan untuk kasus saya), tapi mungkin itu cara terbaik saat ini.

Terima kasih @ a-eid!

Menurut dokumen
https://docs.swmansion.com/react-native-gesture-handler/docs/#usage -with-modals-on-android

tapi tetap tidak berhasil untukku.

@gideaoms bahwa trik dapat berfungsi untuk tombol tetapi kasus penggunaan saya adalah menggunakan PinchGestureHandler di dalam modal.

Trik kecil untuk menyelesaikannya di dalam modal:

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

Masalah ini sudah lebih dari 2 tahun, apakah ada rencana untuk memperbaikinya?

Saya telah membuat komponen Slider khusus untuk aplikasi saya dan tidak dapat menggunakannya sama sekali di Android, karena banyak tampilan di aplikasi saya adalah Modals

Saya telah membungkus setiap layar dan komponen Modal dalam gestureHandlerRootHoC (menggunakan wix / react-native-navigation)

Saya sudah mencoba membungkus layar dan komponen dengan gestureHandlerRootHoc tanpa hasil. Saya tidak mencoba pendekatan RectButton karena saya memerlukan PanGestureHandler untuk mengimplementasikan perilaku swipe-down-to-reject pada modal. Ini membuat frustrasi karena berfungsi dengan sempurna di iOS dan, karena saya menggunakan react-native-modal , yang sebenarnya dilengkapi dengan swipe-to-reject out-of-the-box, saya bahkan mencoba menggunakan pendekatan itu dan itu berfungsi selama Anda tidak memiliki konten yang dapat digulir di dalam modal karena itu buggy baik di iOS dan Android, jadi saya agak macet ...

Untuk menyimpulkan:

  1. ❌ RNGH tidak berfungsi dalam react-native <Modal> komponen (meskipun Komponen dibungkus dengan gestureHandlerRootHOC )
  2. ✅ RNGH berfungsi di layar dari wix/react-native-navigation yang ditampilkan menggunakan Navigation.showModal (meskipun Layar dibungkus dengan gestureHandlerRootHOC )
  3. ✅ RNGH tampaknya berfungsi jika ditampilkan menggunakan fungsi push react-navigation dengan modal: true , tetapi hanya jika tidak menggunakan tumpukan asli ( enableScreens() / createNativeStackNavigator() ).

Saya dapat memberikan detail lebih lanjut jika diperlukan.

react-native-modal-animated bekerja dengan react-native-gesture-handler, karena react-native-modal-animated membuat Modal hanya menggunakan View.

@flyskywhy jika react-native-modal-animated tidak menggunakan aktivitas terpisah seperti react-native-modal lalu bagaimana itu ditampilkan di atas segalanya? Jika menggunakan posisi absolut maka bisa membuat masalah dalam beberapa kasus.

@ waheedakhtar694 , itu menggunakan absolut. Setidaknya dalam kasus saya, tidak ada masalah: stuck_out_tongue_closed_eyes:

@jvaclavik Saya menggunakannya terkait dengan https://github.com/callstack/react-native-paper , yang memiliki komponen bernama Portal yang dirancang khusus untuk tujuan ini.

Dipecahkan menggunakan Portal dari react-native-paper seperti yang dikatakan @jvaclavik .
Saya membungkus Aplikasi saya dengan PaperProvider , kemudian mengubah Modals menjadi Views dan menggabungkannya dengan Portal.
Sekarang lembar bawah berfungsi di Android 😍

_EDIT: untuk beberapa alasan gerakan pan berfungsi tetapi acara onPress tidak berfungsi (tetapi riak ditampilkan) ...
EDIT 2: itu adalah masalah dengan perpustakaan yang saya gunakan, saya memperbaikinya dengan mengubah impor yang dapat disentuh dari "react-native" menjadi "react-native-gesture-handler" _

Berikut beberapa kode yang bisa Anda coba

/*
 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>
  )
}

Ini bekerja untuk saya:
<TouchableWithoutFeedback onPress={() => { console.log("press"); }} > <Text> <RectButton> ... </RectButton> </Text> </TouchableWithoutFeedback>

Ada pembaruan tentang ini? Kami memiliki dua proyek di mana iOS berfungsi seperti yang diharapkan, tetapi moda Android terbukti memusingkan. Kami lebih suka tidak perlu menghapus modals dari proyek ... itu adalah perombakan desain yang besar. : /

@DavidAPears sudah mencoba membungkus Anda modals dalam gestureHandlerRootHOC ?

sesuatu seperti ini ?


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

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


Kombinasi Portal dari react-native-portalize dan gestureHandlerRootHOC bekerja untuk saya. Sesuatu seperti itu:

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

menyetel coverSreen = {false} pada modal works. Tapi butuh modal saya menutupi layar

impor {Platform, Modal} dari 'react-native';
impor {gestureHandlerRootHOC} dari 'react-native-gesture-handler';
impor {AnimatedBottomSheet} dari '../AnimatedBottomSheet';

const AnimatedBottomSheetWrapper = Platform.OS === 'android'? gestureHandlerRootHOC (AnimatedBottomSheet): AnimatedBottomSheet;

Tidak yakin apakah ini akan membantu seseorang, saya juga mengalami masalah dalam menggunakan pustaka ini dengan react-native-modal, tetapi di samping membungkus anak-anak dari modal gestureHandlerRootHOC (ini berfungsi dengan baik untuk tombol, tetapi saya memiliki masalah dengan input teks di modal + avoidKeyboard = true dan setiap menekan tombol, keyboard menutup) Jadi satu-satunya yang saya lakukan, dibuatkan modal children wrapper, kira-kira seperti ini:

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>
  );
};
Apakah halaman ini membantu?
0 / 5 - 0 peringkat