Question

我有一个只有两个屏幕的简单应用程序：“登录”和“主页”。我想从登录屏幕转到主屏幕。如果可能的话，我不想使用导航器。这是我的代码：

Index.js

import { AppRegistry } from 'react-native';
import App from './src/App';

AppRegistry.registerComponent('App', () => App);

App.js

class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
            <LoginPage />
        );
    }
}

export default App;

LoginPage.js

export class LoginPage extends Component{

    constructor(props) {
        super(props);
        this.state = { email: '', password: '' };
    }

    goToHomePage = () => {
        // HERE!!!!!!
    };

    onButtonPress = () => {
        this.goToHomePage();
    };

    render(){
        return(
            <View>
                <TextInput
                    style={Styles.textInput}
                    onChangeText={(email) => this.setState({email})}
                    placeholder={'Email'}
                    value={this.state.email}
                />

                <TextInput
                    style={Styles.textInput}
                    onChangeText={(password) => this.setState({password})}
                    secureTextEntry
                    placeholder={'Password'}
                    value={this.state.password}
                />

                <Button onPress={() => this.props.navigation.navigate('HomePage')}
                    title="Login"
                    color="#841584"
                    accessibilityLabel="Learn more about this purple button"
                />
            </View>
        );
    };
}

HomePage.js

export class HomePage extends Component{

    constructor(props) {
        super(props);
    }

    goToLoginPage = () => {
        // HERE !!!!!!
    };

    onButtonPress = () => {
        this.goToLoginPage();
    };

    render () {
        return (
            <View style={Styles.container}>
                <View>
                    <LoginHeader Title={'Titulo do HomePage'} />
                </View>

                <Button
                    style={Styles.button}
                    title={'Logout'}
                    onPress={this.onButtonPress}
                />
            </View>
        )
    }
}

那么，如何使用此代码实现一种用于移动到屏幕的方法？我尝试使用react-native-navigation和react-navigation，但在这种情况下不适合我。

编辑

我尝试使用此功能：

App.js

import { createStackNavigator } from 'react-navigation';

const RootStack = createStackNavigator(
    {
        HomePage: HomePage,
        LoginPage: LoginPage,
    },
    {
        initialRouteName: 'LoginPage',
    }
);

class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
            <RootStack />
        );
    }
}

导出默认应用；

LoginPage.js

import { createStackNavigator } from 'react-navigation';

export class LoginPage extends Component{

    constructor(props) {
        super(props);
        this.state = { email: '', password: '' };
    }

    goToHomePage = () => {
        // HERE!!!!!!
    };

    onButtonPress = () => {
        this.goToHomePage();
    };

    render(){
        return(
            <View>
                <TextInput
                    style={Styles.textInput}
                    onChangeText={(email) => this.setState({email})}
                    placeholder={'Email'}
                    value={this.state.email}
                />

                <TextInput
                    style={Styles.textInput}
                    onChangeText={(password) => this.setState({password})}
                    secureTextEntry
                    placeholder={'Password'}
                    value={this.state.password}
                />

                <Button onPress={() => this.props.navigation.navigate('HomePage')}
                    title="Login"
                    color="#841584"
                    accessibilityLabel="Learn more about this purple button"
                />
            </View>
        );
    };
}

Answer 1

您是否从“反应”中导入React {Component}？

React Native-如何从屏幕传递到另一个屏幕？

1 个答案: