TranslateY （React Native） 中的问题

问：

这是我的React Native代码。

import React, { useState, useEffect, useRef } from 'react';
import { View, Image, StyleSheet, Animated, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
import PickerSelect from 'react-native-picker-select';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 200,
    height: 200,
    resizeMode: 'contain',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 10,
    width: '80%',
  },
  chooseLanguageText: {
    marginBottom: 20,
  },
  picker: {
    width: '100%',
    marginBottom: 20,
    borderBottomWidth: 1,
    borderColor: 'gray',
    paddingVertical: 10,
  },
  nextButton: {
    backgroundColor: '#4CAF50',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
    marginTop: 20,
  },
  nextButtonText: {
    color: 'white',
    fontSize: 16,
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'lightblue',
    opacity: 0,
  },
  buttonContainer: {
    marginVertical: 10,
    opacity: 0,
  },
  yellowButton: {
    backgroundColor: 'yellow',
    padding: 15,
    borderRadius: 10,
    marginVertical: 10,
  },
  grayButton: {
    backgroundColor: 'gray',
    padding: 15,
    borderRadius: 10,
    marginVertical: 10,
  },
  orangeButton: {
    backgroundColor: 'orange',
    padding: 15,
    borderRadius: 10,
    marginVertical: 10,
  },
  greenButton: {
    backgroundColor: 'green',
    width: 50,
    height: 50,
    borderRadius: 25,
    marginVertical: 10,
  },
  buttonText: {
    textAlign: 'center',
    color: 'black',
  },
  grayButtonContainer: {
    flexDirection: 'row',
  },
});

const handleButtonPress = (buttonName) => {
  console.log(`Button pressed: ${buttonName}`);
};

// ... (previous imports)

const DisplayLogo = () => {
  const translateY = useRef(new Animated.Value(0)).current;
  const opacity = useRef(new Animated.Value(0)).current;
  const buttonOpacity = useRef(new Animated.Value(0)).current;
  const backgroundOpacity = useRef(new Animated.Value(0)).current;
  const [isModalVisible, setModalVisible] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState('');
  const [selectedRegion, setSelectedRegion] = useState('');
  const [step, setStep] = useState(1);

  const handleButtonPress = (buttonName) => {
    console.log(`Button pressed: ${buttonName}`);
  };

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  useEffect(() => {
    const imageAnimation = Animated.sequence([
      Animated.timing(translateY, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }),
      Animated.delay(2000),
      Animated.timing(translateY, {
        toValue: -200,
        duration: 500,
        useNativeDriver: true,
      }),
      Animated.timing(opacity, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }),
    ]);

    imageAnimation.start(() => {
      if (step === 1) {
        setModalVisible(true);
      }
    });

    return () => {
      translateY.setValue(0);
      opacity.setValue(0);
    };
  }, [translateY, opacity, step]);

  const handleNext = () => {
    if (step === 1) {
      setStep(2);
    } else if (step === 2) {
      console.log('Selected Language:', selectedLanguage || 'English');
      setModalVisible(false);
      Animated.parallel([
        Animated.timing(buttonOpacity, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
        Animated.timing(backgroundOpacity, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
      ]).start();
      console.log('Selected Region:', selectedRegion || 'North India');
    }
  };

  return (
    <View style={styles.container}>
      <Animated.Image
        style={{ ...styles.logo, transform: [{ translateY }], opacity }}
        source={require('./assets/Logo.png')}
      />

      <Modal
        isVisible={isModalVisible}
        animationIn="slideInUp"
        animationOut="slideOutDown"
        onBackdropPress={null}
        style={styles.modalContainer}
      >
        <View style={styles.modalContent}>
          {step === 1 && (
            <>
              <Text style={styles.chooseLanguageText}>Select Your Region:</Text>
              <PickerSelect
                style={styles.picker}
                value={selectedRegion}
                onValueChange={(value) => setSelectedRegion(value)}
                items={[
                  { label: 'North India', value: 'North India' },
                  { label: 'South India', value: 'South India' },
                ]}
                placeholder={{}}
                Icon={() => (
                  <View
                    style={{
                      backgroundColor: 'transparent',
                      borderTopWidth: 10,
                      borderTopColor: 'gray',
                      borderRightWidth: 10,
                      borderRightColor: 'transparent',
                      borderLeftWidth: 10,
                      borderLeftColor: 'transparent',
                      width: 0,
                      height: 0,
                      alignSelf: 'center',
                    }}
                  />
                )}
              />
            </>
          )}

          {step === 2 && (
            <>
              <Text style={styles.chooseLanguageText}>Choose Your Preferred Language:</Text>
              <PickerSelect
                style={styles.picker}
                value={selectedLanguage}
                onValueChange={(value) => setSelectedLanguage(value)}
                items={[
                  { label: 'English', value: 'English' },
                  { label: 'Hindi', value: 'Hindi' },
                  { label: 'Telugu', value: 'Telugu' },
                ]}
                placeholder={{}}
                Icon={() => (
                  <View
                    style={{
                      backgroundColor: 'transparent',
                      borderTopWidth: 10,
                      borderTopColor: 'gray',
                      borderRightWidth: 10,
                      borderRightColor: 'transparent',
                      borderLeftWidth: 10,
                      borderLeftColor: 'transparent',
                      width: 0,
                      height: 0,
                      alignSelf: 'center',
                    }}
                  />
                )}
              />
            </>
          )}

          <TouchableOpacity style={styles.nextButton} onPress={handleNext}>
            <Text style={styles.nextButtonText}>Next</Text>
          </TouchableOpacity>
        </View>
      </Modal>

      <Animated.View style={{ ...styles.background, opacity: backgroundOpacity }} />

      <Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
        {/* Yellow buttons */}
        {[
          'Tips For Farming',
          'Weather Updates',
          'Buy Implements',
          'Sell Harvest',
          'Discuss On Forums',
          'Donate',
          // Add more yellow buttons as needed
        ].map((buttonName, index) => (
          <TouchableOpacity
            key={index}
            style={styles.yellowButton}
            onPress={() => handleButtonPress(buttonName)}
          >
            <Text style={styles.buttonText}>{buttonName}</Text>
          </TouchableOpacity>
        ))}
      </Animated.View>

      <Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
        {/* Gray buttons */}
        <View style={styles.grayButtonContainer}>
          {['Help', 'Settings'].map((buttonName, index) => (
            <TouchableOpacity
              key={index}
              style={styles.grayButton}
              onPress={() => handleButtonPress(buttonName)}
            >
              <Text style={styles.buttonText}>{buttonName}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </Animated.View>

      <Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
        {/* Orange button */}
        <TouchableOpacity
          style={styles.orangeButton}
          onPress={() => handleButtonPress('Return Feedback')}
        >
          <Text style={styles.buttonText}>Return Feedback</Text>
        </TouchableOpacity>
      </Animated.View>

      <Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
        {/* Green button */}
        <TouchableOpacity
          style={styles.greenButton}
          onPress={() => handleButtonPress('Contact')}
        />
      </Animated.View>
    </View>
  );
};

export default DisplayLogo;

在我的应用程序中，我希望徽标从底部到中心显示，在那里停留 2 秒钟，转到顶部，然后淡出。但是，我没有得到预期的结果。我尝试更改值，但没有任何反应。我从 ChatGPT 得到了这段代码，但它无法帮助我。我遇到了徽标的问题，尽管还有其他一些错误。我目前想更有效地处理徽标。