Question

如何从LoginForm.js导航到product.js？

route.js

import React from 'react';
import { StyleSheet,View,Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

import Home from './pages/home';
import Products from './pages/product';
// import Products from './pages/components/LoginForm';

const navigation = StackNavigator({
    Home        : { screen: Home },
    // Login       : { screen: LoginForm },
    Products     : { screen: Products },
});

export default navigation;

home.js

 import React from 'react';
import { StyleSheet, Text, View, Button, StatusBar, Image } from 'react-native';
import LoginForm from './components/LoginForm';

export default class Home extends React.Component {
    static navigationOptions = {
        header: null
    };

    render() {
        return ( 
        <View style = { styles.container }>
            <StatusBar
                backgroundColor="#007ac1" barStyle="light-content"/>
            <View style= { styles.logoContainer }>
              <Image style = {styles.logo} source={require('../images/logo.png')} />
            </View>

            <View style= { styles.formContainer }>
              <LoginForm />
            </View>
        </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#03a9f4'
    },
    logoContainer: {
        flexGrow: 1, justifyContent:'center', alignItems:'center'
    },
    logo: {
        width: 80, height: 80
    },
    formContainer: {

    }
});

LoginForm.js

import React from 'react';
import { StyleSheet, Text, View ,TextInput, TouchableOpacity } from 'react-native';

export default class LoginForm extends React.Component {
    constructor(props){
        super(props)
        this.state={
            userName:'',
            password:'',
            type:'A'
        }

    }

    userLogin = () =>{ 
        const { userName } = this.state;
        const { password } = this.state;
        const { type }     = this.state;

        fetch('http://192.168.0.4:3000/notes',{
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
            },
            body:JSON.stringify({
                userName : userName,
                password : password,
                type     : type
            })
        })
        .then((response)=> response.json())
                .then((responseJson) => {
                    if(responseJson.response.success == true) {
                        // alert(responseJson.response.result);
                        navigate('Products');
                    }else{
                        alert(responseJson.response.result);
                    }

                })
                .catch((error)=>{
                    console.error(error);
                })   
    }

    render() {
        return (
            <View style = {styles.container}>
                <TextInput 
                    underlineColorAndroid="transparent"
                    placeholder="Username or Email"
                    placeholderTextColor = "rgba(255,255,255,0.7)"
                    returnKeyType="next"
                    onSubmitEditing={() => this.passwordInput.focus()}
                    onChangeText = {userName => this.setState({userName})}
                    style={styles.input} />
                <TextInput 
                    placeholder="Password"
                    underlineColorAndroid="transparent"
                    secureTextEntry
                    returnKeyType="go"
                    placeholderTextColor = "rgba(255,255,255,0.7)"
                    ref = {(input) => this.passwordInput = input}
                    onChangeText = {password => this.setState({password})}
                    style={styles.input} />

                <TouchableOpacity style={styles.buttonContainer} onPress={this.userLogin} >
                    <Text style={styles.buttonText}>LOGIN</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container : {
        padding:20
    }, 
    input: {
        height:40, backgroundColor: 'rgba(255,255,255,0.2)', marginBottom:20,
        color:'#FFF', paddingHorizontal:10, borderRadius:5
    },
    buttonContainer: {
        backgroundColor: "#2980b9", paddingVertical:10, borderRadius:5
    },
    buttonText: {
        textAlign :'center', color:'#FFFFFF', fontWeight:'700'
    }
});

product.js

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


export default class Product extends React.Component {
    static navigationOptions = {
        // title: 'Home',
        header: null
      };
    render() {
        return ( 
        <View style = { styles.container }>
            <Text> Product Page open </Text>
            <Button
                title="Go to Home"
                onPress={() => this.props.navigation.navigate('Home')}
            />  
        </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Answer 1

将LoginForm作为navigator的一部分（目前已注释）。然后在userLogin函数内使用this.props.navigation.navigate('Products')进行导航，查看导航doc

userLogin = () =>{ 
    ...
    fetch('http://192.168.0.4:3000/notes',{
        ...
    })
    .then((response)=> response.json())
    .then((responseJson) => {
         if(responseJson.response.success == true) {
             // alert(responseJson.response.result);
             this.props.navigation.navigate('Products');
         }else{
              alert(responseJson.response.result);
         }
    })
    .catch((error)=>{
         console.error(error);
    })   
}

希望这会有所帮助！

成功登录后如何从LoginForm.js导航到product.js

1 个答案: