Блог

Главная - Вопросы по программированию - Проблема с ScrollView и панелью поиска на Android / Expo-web

Проблема с ScrollView и панелью поиска на Android / Expo-web

#android #react-native #expo #react-native-web

#Android #react-native #expo #react-native-web

Вопрос:

Я создаю веб-сайт с использованием react-native-web, и у меня возникли проблемы с мобильной версией приложения, особенно с Android.

Когда я начинаю прокручивать веб-сайт, панель поиска и панель инструментов скрываются, а приложение реагирует не очень хорошо, оставляя белую полосу внизу или странно подстраиваясь, видео ниже:

До и после прокрутки, когда полосы скрываются

Вот мой файл app.tsx:

 const App: React.FC = () => {
  const { width, height } = useDimensions().window;

  return (
    <>
      <Provider store={store}>
        <Router>
          <View
            style={{
              height: height < width ? height : Dimensions.get('window').height,
              width: height < width ? width : Dimensions.get('window').width,
              backgroundColor: '#0d0d0d',
            }}
          >
            <StatusBar barStyle="light-content" backgroundColor="#0d0d0d" />
            {height < width ? <WebRoutes /> : <MobileRoutes />}
          </View>
        </Router>
      </Provider>
    </>
  );
};

и вот моя домашняя страница с ScrollView:

 return (
    <>
      <LandingPage screenYAnimated={screenYAnimated} />
      <Animated.ScrollView
        ref={scrollViewRef}
        scrollEventThrottle={16}
        onScroll={Animated.event([
          { nativeEvent: { contentOffset: { y: screenYAnimated } } },
        ])}
        style={{
          flex: 1,
          transform: [
            { scale: scaleScrollView },
            { translateY: translateScrollView },
          ],
        }}
        contentContainerStyle={{
          flex: 1,
        }}
      >
        <View
          style={{
            height: '100%',
            width: '100%',
            backgroundColor: 'transparent',
          }}
        />

        <ServiceSlide screenYAnimated={screenYAnimated} />
        <Process screenYAnimated={screenYAnimated} />
        <View style={{ height: 300, backgroundColor: 'transparent' }} />
        <Works screenYAnimated={screenYAnimated} />
        <Blog screenYAnimated={screenYAnimated} />
        <Footer color="#595959" />
      </Animated.ScrollView>
      <Contact />
      <Header animateHeader={animateHeader} />
    </>
  );
};

трансформирующая часть ScrollView предназначена для анимации при нажатии кнопки, но они начинаются с 1 и 0.

Я хотел знать, возможно ли, чтобы панель поиска и панель инструментов оставались статичными, или способ исправить отзывчивость самого приложения.