Блог

Я использую эту библиотеку (https://github.com/satya164/react-native-tab-view) для создания представления с вкладками, где каждая вкладка представляет категорию и отображает список устройств с флажком для их выбора/отмены выбора. Поскольку некоторые из этих категорий перекрываются , родительский компонент должен отслеживать selectedDevices , чтобы при переключении между вкладками на следующую из них повлиял выбор, сделанный в предыдущих. Это не было бы проблемой, за исключением того факта, что каждая вкладка в основном является a ScrollView , и поэтому крайне важно, чтобы каждый раз, когда вы делаете выбор, она не размонтировалась и не перемонтировалась, теряя позицию прокрутки.

TabView имеет renderScene реквизит, который позволяет мне отображать различные экраны. Если я пройду selectedDevices через подставку, renderScene она будет вести себя как фабрика, в основном создавая новый элемент React каждый раз selectedDevices , когда он меняется, и, таким образом, запускает повторное монтирование.

Если есть способ, чтобы установить выбранные устройства только тогда, когда экран изменится (потому что пользователь нажал на другую вкладку или украсть, чтобы оно) что будет достаточно хорошим, потому что, несмотря на перемонтировать, что не влияет на положения прокрутки, но используя useEffect очистку функцию, чтобы установить некоторые устройства не будет никакой пользы, потому что изменение разделе не размонтировать компонент.

Единственное решение, о котором я подумал, — это создать новый Context и использовать его для совместного selectedDevices использования между различными экранами вкладок. Это работает очень хорошо, полностью избегая какого-либо перемонтажа, но мне почему-то не нравится, потому что это похоже на плохой дизайн.

Можете ли вы придумать какое-нибудь лучшее решение?