Блог

Главная - Вопросы по программированию - Transform и props.progress не работают на react-native-web

Transform и props.progress не работают на react-native-web

#react-native #react-navigation #navigation-drawer #react-native-web

#react-native #реагирование-навигация #навигация-ящик #react-native-web

Вопрос:

У меня есть приложение на React Native, и я применяю некоторые эффекты поворота к своему ящику, в моем приложении, запущенном на телефоне, все работает отлично, но когда я перехожу на react-native-web него, оно работает некорректно, как вы можете видеть на изображении ниже, разница, которая остается на экранах, когда оназапускается на мобильном телефоне и при запуске в Интернете.

введите описание изображения здесь
введите описание изображения здесь

В Интернете, когда ящик закрыт, он по-прежнему применяет эффект поворота, этого не может произойти. Я поместил свой проект в codesandbox.io

Чтобы исправить эту проблему, я попытался использовать Animated.concat() , но это все равно не сработало:

 <Animated.View
  style={[
    styles.animatedView,
    {
      borderRadius: "50px",
      transform: [
        { rotate: Animated.concat("-8deg") },
        { translateX: Animated.concat("70px") },
        { translateY: Animated.concat("20px") }
      ]
    }
  ]}
>
  <Stack.Navigator
    screenOptions={{
      headerTransparent: true,
      headerTitle: null,
      headerTitleAlign: "left",
      headerLeft: () => (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <View style={styles.screenOptionsView}>
            <Image
              source={require("../assets/images/menu.png")}
              style={styles.screenOptionsImage}
            />
            <Text style={styles.screenOptionsText}>START</Text>
          </View>
        </TouchableOpacity>
      )
    }}
  >
    <Stack.Screen name="Start" component={Start} />
    <Stack.Screen name="Cart" component={Cart} />
    <Stack.Screen name="Favorites" component={Favorites} />
    <Stack.Screen name="Orders" component={Orders} />
  </Stack.Navigator>
</Animated.View>

Знаете ли вы, как я могу заставить его работать в Интернете так же хорошо, как на мобильных устройствах?

Заранее большое вам спасибо!!!!