React Native仅主屏幕可导航，其他屏幕导航失效求助

我刚接触React，已经学习了几天，希望先实现应用的正常导航再深入学习。目前主屏幕可以正常导航，但Telefone组件中的按钮点击后无法跳转至"cadastro"页面，请求修正代码。

我的App.js代码 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { colors } from './src/utils/colors';
import { Telefone } from './src/telefone';
import { Menu } from './src/menu';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Procurar } from './src/procurar';
import PassageiroFrm from './src/PassageiroFrm';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function ProcurarScreen() {
  return (
      <Procurar></Procurar>
  );
}

function PassageiroScreen(navigation) {
  return (
      <PassageiroFrm></PassageiroFrm>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}
function LoginScreen() {
  return (
      <Telefone></Telefone>
  );
}

const Tab = createBottomTabNavigator();

export default function App({navigation}) {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="login" component={LoginScreen} />
          <Tab.Screen name="cadastro" component={PassageiroScreen} />
          <Tab.Screen name="início" component={ProcurarScreen} />
          <Tab.Screen name="corridas" component={SettingsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.azul,
  },
});

Telefone组件代码 #

import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {TextInput} from 'react-native-paper';
import { colors } from './utils/colors';
import { Button } from 'react-native';
import PassageiroFrm from './PassageiroFrm';
import { Procurar } from './procurar';
import { Link } from 'react-router-dom';
import { useNavigation } from '@react-navigation/native';

let i = 0;

export const Telefone = ({}) => (
    <View style={StyleSheet.container}>
        <View style={{ justifyContent:'center', alignItems: 'center'}} >
            <Image source={ require("./imagens/placa.jpg")}></Image>
        </View>
        <TextInput label="Entre com o seu telefone"/>
        <Button color="#F0C228" style={{ fontColor:"red", buttonText: {color: "black"} }} onPress={() => regiao()} title="Entrar"></Button>
        <Text>Ainda não sou passageiro</Text>
        <Button color="#F0C228" onPress={() => navigation.navigate('cadastro')} title="ser um passageiro"></Button>
    </View>
)

function ProcurarScreen() {
    const navigation = useNavigation();
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    text: {
        color: colors.branco
    }
})

问题分析与修正方案 #

1. Telefone组件核心问题 #

• 未获取导航对象：直接使用navigation.navigate但未定义navigation，需通过useNavigation钩子获取。
• 样式引用错误：StyleSheet.container应改为styles.container（styles是你创建的样式实例）。
• 冗余导入：React Native导航不需要react-router-dom的Link，可删除。
• 未定义函数：第一个按钮的onPress调用了未声明的regiao函数，需补充定义或调整逻辑。

2. App.js优化点 #

• 组件参数未解构：PassageiroScreen的navigation参数未解构，虽不影响跳转，但写法不规范。

修正后的Telefone组件代码 #

import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {TextInput} from 'react-native-paper';
import { colors } from './utils/colors';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

// 补充regiao函数定义，可根据实际需求修改逻辑
function regiao() {
  console.log("Entrar按钮被触发");
  // 这里可添加登录相关逻辑
}

export const Telefone = () => {
    // 通过useNavigation钩子获取导航实例
    const navigation = useNavigation();

    return (
        <View style={styles.container}>
            <View style={{ justifyContent:'center', alignItems: 'center'}} >
                <Image source={ require("./imagens/placa.jpg")} />
            </View>
            <TextInput label="Entre com o seu telefone"/>
            <Button 
                color="#F0C228" 
                onPress={regiao} 
                title="Entrar"
            />
            <Text>Ainda não sou passageiro</Text>
            <Button 
                color="#F0C228" 
                onPress={() => navigation.navigate('cadastro')} 
                title="ser um passageiro"
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20, // 可选：添加内边距优化布局
    },
    text: {
        color: colors.branco
    }
})

修正后的App.js（可选优化） #

// 其他导入保持不变

// 优化PassageiroScreen，解构props
function PassageiroScreen({ navigation }) {
  // 若PassageiroFrm需要导航，可传递navigation参数
  return <PassageiroFrm navigation={navigation} />;
}

// 其他代码保持不变

内容的提问来源于stack exchange，提问作者Diego Alves