我不能换屏幕

Question

我在另一个组件（LoginScreen.js）内部有一个组件（Bottom.js），在这个组件（Bottom.js）有一个按钮（TouchableOpacity），我想按下它并将LoginScreen更改为RegisterScreen，但我不能！我试图查看反应导航的文档，但我仍然感到困惑。有人可以帮我吗？

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
//import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet } from 'react-native';
import LoginScreen from './src/screens/Login/LoginScreen';
import  RegisterScreen from './src/screens/Register/RegisterScreen';
import mock from './src/mocks/Login'

const Stack = createStackNavigator();

const MyTheme = {
  dark: false,
  colors: {
    background: 'rgb(7, 19, 24)',
  },
};

export default function App(){
  return (
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name='Login' >
          {() => <LoginScreen {...mock}/>}
        </Stack.Screen>
        <Stack.Screen name='Register' >
          {() => <RegisterScreen />}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#071318',
  },
});

LoginScreen.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import {Button, Input, Image} from 'react-native-elements'
import Top from './components/Top'
import Form from './components/Form'
import ButtonEnter from './components/ButtonEnter'
import Bottom from './components/Bottom'

export default function LoginScreen({top, form, buttonEnter, bottom, navigation})
{
    return <>
        <View style={styles.background}>
            <StatusBar style='light'/>
            <Top {...top}/>
            <Form {...form}/>
            <ButtonEnter {...buttonEnter}/>
            <Bottom {...bottom} {...navigation}/>
        </View>
    </>
}

const styles = StyleSheet.create({
    background:{
        backgroundColor: "#071318"
    },
    text:{
        color:'#AAA',
        fontSize: 16,
    },
    logo:{
        width: 160,
        height: 160,
        marginHorizontal: '25%',
        marginTop: '15%'
    }
})

Bottom.js

import React from 'react';
import { StyleSheet,View, Text, TouchableOpacity} from 'react-native';

export default function Bottom({signupButtonText, navigation})
{
    return <>
        <View style={styles.view}>
            <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Register')}>
                <Text style={styles.helpButton}>{signupButtonText}</Text>
            </TouchableOpacity>
        </View>
    </>
}

const styles = StyleSheet.create({
    view:{
        flexDirection:'row',
        width: '70%',
        height:'40%',
        marginHorizontal:'15%',
        justifyContent:'center',
    },
    button:{
        marginTop: 16,
        backgroundColor: '#0B2027',
        paddingVertical: 12,
        borderRadius:20,
        width: 80,
        alignItems: 'center',
        position: 'absolute',
        bottom: 30
    },
    image:{
        width:'30%',
        marginHorizontal:'35%'
    },
    helpButton:{
        color:'white',
        justifyContent:'space-around'
    }
})

Register.js

import React from 'react'
import { View, Text } from 'react-native'

const RegisterScreen = ({navigation}) => {
    return (
        <View>
            <Text>register</Text>
        </View>
    )
}

export default RegisterScreen

Answer 1

底部组件期望接收导航，而不是它的属性，所以试试这个：

<Bottom navigation={navigation} {...bottom}/>