我无法更改屏幕

Question

我有一个组件(Bottom.js)LoginScreen.js)，在这个组件中(Bottom.js))有一个按钮(TouchableOpacity)，我想按下它并将LoginScreen更改为RegisterScreen，但我不能!我试着去看react导航的文档，但我还是很困惑。有人能帮帮我吗?

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}/>