Question

我已经阅读了与我当前遇到的问题有关的多个类似问题。我希望用户点击登录按钮，它将转到下一个包含tab-navigators的屏幕

我当前遇到的问题是，当用户单击登录按钮时，会弹出未定义的错误。关于用户名和密码验证，暂时可以忽略，我现在想要了解所有内容以及如何点击按钮，它将导航到下一个屏幕，即“LoginScreen.js”到“FrontPage”的.js“

LoginScreen.js

    import React, { Component } from 'react';
import { 
    Platform, 
    StyleSheet,
    Text,
    Image,
    AppRegistry,
    TouchableHighlight,
    View,
    Button,
    ScrollView,
    TextInput,


} from 'react-native'
import FrontPage from './FrontPage'
import {TabNavigator, StackNavigator, NavigationActions} from 'react-navigation'
import firebase from 'firebase'

class LoginScreen extends React.Component {

    _onPressLogin(){
        //function tba 

        console.log('login btn pressed')
        this.props.navigation.navigate('FrontPage')

    }




    render() {

        return (
            <ScrollView> 
                <View style = {[styles.container]}> 

                    <Text> Login </Text>
                    <TextInput 
                        label = 'Email Address' 
                        placeholder = 'email@domain.com' 
                        keyboardType = 'email-address'
                        //TBA 
                    />

                    <TextInput 
                        label = 'Password'
                        placeholder = '********'
                        //TBA 
                    />

                   <Button onPress= {this._onPressLogin} 
                    title = 'Login' />


                </View>
            </ScrollView>
        );
    }    
}



export default LoginScreen;

FrontPage.js

  import React from 'react';
import {
    Text,
    View,
    Button,
    TouchableHighlight,
    Image,
    StyleSheet,
    AppRegistry,

} from 'react-native'

import {StackNavigator, TabNavigator} from 'react-navigation'
import LoginScreen from './LoginScreen';

export default class FrontPage extends React.Component{
    static navigationOptions = {
        tabBarLabel: 'First',
        routeName: 'FrontPage',

    };

    render(){
        const {navigate} = this.props;
        return(
            <View>
                <Text> This is the first page </Text> 
                <Image
                    source = {require('../images/testImage.png')}
                    style = {{width:60, height:60}}>
                </Image>

                <LoginScreen navigation = {navigation} />
            </View>
        )
    }
}

App.js

    import React, { Component } from 'react';
import { 
  Platform,
  StyleSheet,
  Text,
  Image
} from 'react-native';

import {StackNavigator, TabNavigator} from 'react-navigation';

import CameraScreen from './screens/CameraScreen'
import ThirdScreen from './screens/ThirdScreen'
import LoginScreen from './screens/LoginScreen'
import FrontPage from './screens/FrontPage'

//TAB NAVIGATOR 
var Navigation = TabNavigator({
  Tab1:{screen:FrontPage},
  Tab2:{screen:CameraScreen},
  Tab3:{screen:ThirdScreen}

}, {

  tabBarPosition:'bottom',
  swipeEnabled:false,
  tabBarOptions: {
    showIcon:true,  
    activeTintColor: 'white',
    activeBackgroundColor: 'white',
    inactiveTintColor:'#7f8c8d',
    inactiveBackgroundColor:'#2c3e50',
    style: { backgroundColor: '#2c3e50' },
    labelStyle: {
      frontSize:9.5,

    }
  }
});

export default Navigation;

Answer 1

它有参考问题，您需要bind function _onPressLogin this LoginScreen

<Button onPress= {this._onPressLogin.bind(this)} title = 'Login' />

反应导航undefined不是对象

1 个答案: