Я пытаюсь связать свой компонент SignIn с моим компонентом ForgotPassword.
Это базовый дизайн моего входа:
import React, { Component } from 'react';
import { TextInput, Button, StyleSheet, Text, View } from 'react-native'
import { NativeRouter, withRouter, Switch, Route, Link } from 'react-router-native'
import ForgotPassword from './ForgotPassword'
import { Auth } from 'aws-amplify'
class SignIn extends Component {
render() {
return(
<View style={styles.container}>
<TextInput
onChangeText={value => this.onChangeText('username', value)}
style={styles.input}
placeholder='username'
/>
<TextInput
onChangeText={value => this.onChangeText('password', value)}
style={styles.input}
secureTextEntry={true}
placeholder='password'
/>
<Button style={styles.button} title="Sign In" onPress={this.signIn.bind(this)} />
<TextInput
onChangeText={value => this.onChangeText('confirmationCode', value)}
style={styles.input}
placeholder='Confirmation Code'
/>
<Button style={styles.button} title="Confirm Sign In" onPress={this.confirmSignIn.bind(this)} />
<Link to="/forgotPassword"><Text>Forgot password</Text></Link>
</View>
)
}
}
export default SignIn
У меня есть все маршруты для моегоРеактивный маршрутизатор, настроенный в моем Routes.js:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { NativeRouter, Switch, Route } from 'react-router-native'
import ForgotPassword from './ForgotPassword'
import SignIn from './SignIn'
import MainPage from './MainPage'
export default class Routes extends Component {
render() {
return (
<NativeRouter>
<View >
<Switch>
<Route exact path="/forgotPassword" component={ForgotPassword} />
<Route exact path="/signin" component={SignIn} />
</Switch>
</View>
</NativeRouter>
);
}
}
Затем я импортирую свой компонент Routes.js в мой компонент App.js:
const store = createStore(reducers, applyMiddleware(thunk))
type Props = {};
export default class App extends Component<Props> {
render() {
if(this.state.isAuthenticated) {
console.log('auth:', Auth)
return (
<Provider store={store}>
<View style={{position: 'relative'}}>
<Search logOut={this.logOut} />
<LeagueSelect />
<Card />
</View>
</Provider>
)
}
return (
<View style={styles.container}>
<Tabs
screenProps={{
authenticate: this.authenticate.bind(this)
}}
/>
<Routes />
</View>
)
}
}
})
Любая помощь по этому вопросу будет принята с благодарностью,Я застрял в этом весь день.
Конечная цель - иметь возможность связываться из SignIn с ForgotPassword и не оставлять компонент SignIn на странице, а присутствовать только компонент ForgotPassword.