react-native - react native : How to redirect

Question

我是 React Native 的新手，我只是不明白 react 导航是如何工作的。我已经花了多个工作日并尝试了不同的变体，但我什至没有从 https://reactnavigation.org/docs/intro/ 获得示例去工作。

我的项目是使用 create-react-native-app AwesomeProject 创建的，就像 React Native Docs 中所述。 .

所以我回到了上一个工作点(没有路由)。

这是我的文件结构:

root
- src
- - screens
- - - LoginScreen.js
- - - HomeScreen.js
- App.js

在我的 App.js 中，我只需执行一个简单的调用:

import LoginScreen from './src/screens/LoginScreen';
export default LoginScreen;

这是我的 LoginScreen.js 的简化版本:

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    AppRegistry,
    Button,
    ReactNative,
} from 'react-native';

/**
 * Actual View
 */
class LoginScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // some values
        }
    }

    render() {
        return (
                <View style={[styles.containerOne]}>/>
                // Some Input fields
                <Button
                    onPress={this.loginButtonOnPress.bind(this)}
                    title="Login"
                    style={[styles.loginButton]}
                />
            </View>
        );
    }

    loginButtonOnPress() {
        // Validation with fetch
    }
}

export default LoginScreen;

/**
 * Style
 */
const styles = StyleSheet.create({
    containerOne: {
        marginTop: -160,
        justifyContent: 'center',
        flex: 1,
        alignItems: 'center',
    }
    loginButton: {
        color: 'blue',
        marginTop: 10,
    }
});

LoginScreen.js 应该是第一个显示的页面。我想在调用 loginbuttonOnPress 时加载我的 HomeScreen.js 文件。我该怎么做呢？我已经找到了类似的东西

const SimpleApp = StackNavigator({
  Login: { screen: LoginScreen },
  Home: { screen: HomeScreen },
});

但我也无法让它发挥作用。

我很感谢我能得到的每一个帮助。

Answer 1

按登录按钮，然后转到主屏幕。

render() {
    return (
            <View style={[styles.containerOne]}>/>
            // Some Input fields
            <Button
                onPress={() => navigation.navigate('Home'))}
                title="Login"
                style={[styles.loginButton]}
            />
        </View>
    );
}

你可以尝试一下

App.js

const SimpleApp = StackNavigator({
  Login: { screen: LoginScreen },
  Home: { screen: HomeScreen },
},{ swipeEnabled: false }

);

export default SimpleApp