Блог

Главная - Вопросы по программированию - нажатие на значок в навигации по вкладкам для перехода к началу списка не работает в react-native

нажатие на значок в навигации по вкладкам для перехода к началу списка не работает в react-native

#reactjs #react-native #react-native-navigation

Вопрос:

У меня есть навигация по нижней вкладке в моем приложении React native, и на экране первой вкладки у меня есть компонент, который в основном содержит плоский список, и я хочу, чтобы, когда пользователь нажимает на значок этой вкладки, он прокручивался вверх (в основном, как instagram). Я попробовал несколько реализаций, где я использовал scrollToIndex и scrollToOffset и пытался использовать useScrollToTop навигацию в react, и вот моя реализация:

(TabNavigator.js):

 <Tab.Screen
  name="Home"
  component={HomeNavigation}
  options={{
    tabBarButton: (props) => (
      <TouchableOpacity
        {...props}
        style={[...props.style, styles.buttonStyle]}
        disabled={currentShapeAnim.name === 'home'}
        onPress={() => {
          setTimeout(() => {
            navigation.navigate('Home');
          }, 550);
          selectTab('home', jumpHome, bounceHome, wp(35));
        }}>
        {!hideHome amp;amp; (
          <Shape icon="e-home" shapeAnimations={[bounceHome]} />
        )}
        <Shape icon="f-home" shapeAnimations={[bounceHome, jumpHome]} />
      </TouchableOpacity>
    ),
  }}
/>
... // other screens

и в моем Домашнем Компоненте:

  const recipeScroll = useRef(null);
 useScrollToTop(recipeScroll);
...
...
<FlatList
        ref={recipeScroll}
        style={{marginLeft: wp(2), width: '100%', height: hp(20)}}
        data={meals}
        showsHorizontalScrollIndicator={false}
        horizontal
        scrollEnabled
        renderItem={({item}) => <MealCard item={item} {...item} />}

Ответ №1:

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

с помощью функции scrolltoindex

Метки: