javascript - LinearGradient 和 onPress 用于导航

Question

所以我是原生 react 的新手，并且了解有关使用 onPress 与按钮的基础知识，但由于我已将按钮更改为下面的 LinearGradient 代码，所以我有点迷失了使用 onPress。现在我只有 onPress 输出到我的终端只是为了测试并确保其工作。

最后，我想导航到另一个页面，我假设我将为此使用一些导航 API。无论如何，我为我的无知表示歉意，非常感谢您的宝贵时间!谢谢!!

我现在放置 onPress 代码的地方是我唯一能想到放置它的地方。

现在意识到 LinearGradient 不适用于 onPress...我应该如何将该 LinearGradient 导航到另一个页面？

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Animated  } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default class GetStartedButton extends Component {
  
    constructor(props) {
      super(props)
  
      this.fadeAnimation = new Animated.Value(0)
    }
    componentDidMount() {
        Animated.timing(this.fadeAnimation, {
          toValue: 1,
          duration: 5000,
          useNativeDriver: true,      
        }).start()
      }

    render(){
        return(
        <Animated.View style={[styles.container, { opacity: this.fadeAnimation}]}>
            <TouchableOpacity>
            <LinearGradient   
            onPress={() => console.log("clicked")}        
            colors={['#DB004C','#FC008E']}
            style={styles.linearGradient}
            start={{ x: 0, y: 0.5 }}
            end={{ x: 1, y: 0.5 }}
            >
              
                <Text style={styles.text}>
                    Get Started
                </Text>     
                </LinearGradient>
                </TouchableOpacity>
        </Animated.View>
    )
    
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        
    },
    linearGradient: {
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
        width: 340,
        padding: 20,
    },

    text: {
        color: 'white',
        fontSize: 20,
        justifyContent: 'center',
    alignItems: 'center',
    }
});

Answer 1

关于那个？

<LinearGradient
  colors={['#DB004C', '#FC008E']}
  style={styles.linearGradient}
  start={{ x: 0, y: 0.5 }}
  end={{ x: 1, y: 0.5 }}
>
  <TouchableOpacity
    onPress={() => console.log('clicked')}
    style={{ alignItems: 'center', justifyContent: 'center' }}
  >
    <Text style={styles.text}>Get Started</Text>
  </TouchableOpacity>
</LinearGradient>