使用 React Native 将链接重定向到新页面

Question

我正在学习 React Native，需要 React Native 专家的帮助！有谁知道如何将链接重定向到新页面（组件）。 我有一个项目列表（购买、设置、策略、客户支持），当我点击它时，我想将它们重定向到一个新页面。我需要使用 onPress 事件还是有其他方法？

import React, { component} from 'react';
import {Component} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import Login from './LogIn';

class Profile extends Component{
    state = {
        names: [
           {
              id: 0,
              name: 'Purchases',
           },
           {
              id: 1,
              name: 'Settings',
           },
           {
              id: 2,
              name: 'Policies',
           },
           {
              id: 3,
              name: 'Feedback',
           },
           {
            id: 3,
            name: 'Customer support',
         },
         {
            id: 3,
            name: 'About the app',
         }
        ]
     }

   
    

render(){
    return(
        <View style={styles.container}>
          
            <Text style={styles.header}>Welcome to GOLDENSHOE</Text>
            <Text style={{fontSize: 16}}>Sign up or log in to access special discounts, your favorites and your account </Text>

             <Login />

             <View>
            {
               this.state.names.map((item, index) => (
                  <TouchableOpacity
                     key = {item.id}
                     style = {styles.listCont}
                     onPress = {() => console.log('hello')}>
                     <Text style = {styles.text}>
                        {item.name}
                     </Text>
                  </TouchableOpacity>
               ))
            }
         </View>
           
           
              <View style={{marginRight: 50}}>
                   <Text style={{marginTop: 40, textAlign:"right",fontWeight: "bold"}}>STAY IN TOUCH</Text>
                   <TextInput style={{textAlign:"right", marginTop: 10, borderColor: 'black'}}placeholder="Sign up for GOLDENSHOE news" type="text" />
                   
               </View>
        </View>
    )
}
}

const styles = StyleSheet.create({
    container: {

        marginLeft: 10
       
    },
    header: {
        fontWeight: 'bold',
        marginTop: 40,
        marginBottom: 30,
        color: "lightgreen",
        fontSize: 30,
        
        
        
    },
   

    button: {
        alignItems: 'flex-start',
        marginTop: 30,
        flexDirection: 'column',
        borderBottomColor: "black",
        borderBottomWidth: 1,
        borderTopColor: "black",
        borderTopWidth: 1,
    

        
    },

    listCont: {
        
            padding: 10,
            marginTop: 3,
            borderBottomWidth: 1
            
        
    },

   

    login: {
        borderRadius: 10
    }

   

  

   
})

export default Profile;