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

按登录按钮，然后转到HomeScreen。

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

在你的功能中尝试这个

ServerName

React Native：如何重定向

2 个答案: