React Native：如何重定向

Question

我是 React Native 的新手，我只是不明白 react-navigation 是如何工作的。我已经花了多个工作日并尝试了不同的变体，但我什至没有让 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

Answer 2

在你的函数中试试这个

loginButtonOnPress() {
     this.props.navigation.navigate('Home')
}

React Native：如何重定向

React Native: How to redirect

react-native

react-navigation