使用导入的按钮在堆栈屏幕之间导航

Question

我刚开始使用本机react，在组件之间建立连接时遇到了问题。

例如onClickFunction() {this.props.navigation.navigate('CurrencyList')}不适用于我的模式。我对这个问题做了几次研究，但我不明白它的逻辑。

这是我的App.js

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// Screens---------------------------------------------------------

// Auth Screens 
import Login from './screens/Authentication/Login'
import Register from './screens/Authentication/Register'

// Main Screens
import Home from './screens/Home'
import Converter from './screens/Converter'
import CurrencyList from './screens/CurrencyList'
//-----------------------------------------------------------------
const Stack = createStackNavigator();
var routeName = 'Converter';

export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={`${routeName}`}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Converter" component={Converter} />
<Stack.Screen name="CurrencyList" component={CurrencyList} />
</Stack.Navigator>
</NavigationContainer>
)
}
}

这是我的转换器页面

// Currency Converter Page
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// Components
import UpdateButton from '../../components/UpdateButton'
import CurrencySelectButton from '../../components/CurrencySelectButton'
import CurrencyTextInput from '../../components/CurrencyTextInput'
import ConvertedCurrencyTextInput from '../../components/ConvertedCurrencyTextInput'
export default function Home() {
return (
<View style={styles.container}>

<View style={styles.textHolder}>
<CurrencyTextInput />
<Text>=</Text>
<ConvertedCurrencyTextInput />
</View>
<View style={styles.buttonHolder}>
<CurrencySelectButton />
<Text>to</Text>
<UpdateButton />

</View>



</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
buttonHolder: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f1f1f1',
alignContent: 'center'

},
textHolder:{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f1f1f1',
alignContent: 'center'
}
});

这是我想更改屏幕的按钮组件

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

export default class CurrencySelectButton extends React.Component {

onClickFunction() {
this.props.navigation.navigate('CurrencyList')  
}
render() {
return (

<TouchableOpacity onPress={() => this.onClickFunction()} style={styles.button} >
<Text style={styles.buttonText} >TRY</Text>
</TouchableOpacity>
)
}
}

const styles = StyleSheet.create({
button: {
backgroundColor: 'black',
padding: 15,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
flex: 1,
height: 75,
marginHorizontal:20
},
buttonText: {
color: 'white',
fontWeight: 'bold',
fontSize: 17
}
})

Answer 1

您必须将导航道具从主页传递到下面的按钮

export default function Home({navigation}) {
return (
<View style={styles.container}>

<View style={styles.textHolder}>
<CurrencyTextInput />
<Text>=</Text>
<ConvertedCurrencyTextInput navigation={navigation}/>
</View>
<View style={styles.buttonHolder}>
<CurrencySelectButton />
<Text>to</Text>
<UpdateButton />

</View>

</View>
);
}