导航到另一个屏幕时，undefined不是对象（评估“ this.props.navigation.navigate”）

Question

当我单击“获取OTP”按钮时，它向我显示以下错误：undefined不是对象（正在评估“ this.props.navigation.navigate”）

我在堆栈溢出中尝试了许多示例和解决方案，但还没有解决方案

  

App.js

import React from 'react';  
import {StyleSheet, Text, View, Image, StatusBar, ImageBackground} from 'react-native';  
import { createBottomTabNavigator, createAppContainer, StackNavigator } from 'react-navigation';  
import Icon from 'react-native-vector-icons/Ionicons';  
import BuyerLoginForm from './component/BuyerLoginForm';
import VendorLoginForm from './component/VendorLoginForm';


class BuyerHome extends React.Component {  
  render() {  
    const { navigation } = this.props;
    return ( 
        <View style={styles.BuyerContainer}>  
        <ImageBackground source={require('./logo/backround.png')} style={{width: '100%', height: '100%'}}>
        <StatusBar backgroundColor='transparent' translucent barStyle="dark-content" />
            <View style={styles.logoContainer}>
              <Image style={styles.logo} source={require('./logo/applogo.png')} />
            </View>
            <View style={styles.title}><Text>Hey Buyer, please login via your number.</Text></View>
            <View style={styles.formContainer}>
              <BuyerLoginForm navigation={navigation} />
            </View>
            </ImageBackground>
        </View>  
    );  
  }  
}  

class VendorHome extends React.Component {  
  render() {  
    return (  
      <View style={styles.VendorContainer}>  
        <ImageBackground source={require('./logo/backround.png')} style={{width: '100%', height: '100%'}}>
        <StatusBar backgroundColor='transparent' translucent barStyle="dark-content" />
          <View style={styles.logoContainer}>
          <Image style={styles.logo} source={require('./logo/applogo.png')} />
            </View>
            <View style={styles.title}><Text>Hey Vendor, please login via your number.</Text></View>
            <View style={styles.formContainer}>
            <VendorLoginForm />
            </View>
            </ImageBackground>
        </View>  
    );  
  }  
}  

const TabNavigator = createBottomTabNavigator(  
    { 
      Home:{  
        screen:BuyerHome,  
        navigationOptions:{  
          tabBarLabel:'Buyer',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="ios-basket" color={tintColor} size={25}/>  
          )  
        }  
      },  
      Profile: {  
        screen:VendorHome,  
        navigationOptions:{  
          tabBarLabel:'Vendor',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="md-cart" color={tintColor} size={25}/>  
          )  
        }  
      },
    },  
    {  
      initialRouteName: "Home"
    },  
);  

  

BuyerLoginForm.js

import React from 'react';  
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView} from 'react-native';  
import { createStackNavigator, createAppContainer } from 'react-navigation';  
import BuyerVerify from '../screens/BuyerVerify';

class BuyerLogin extends React.Component{
    render(){
        return(
            <View style={styles.outer}>
                <View style={styles.inner}>
                    <KeyboardAvoidingView style={styles.container}> 
                    <TextInput style={styles.input}
                        placeholder="Enter your contact number"
                        placeholderTextColor="#939eaf"
                        keyboardType="phone-pad"
                     />
                    <TouchableOpacity style={styles.buttonContainer} onPress={()=> this.props.navigation.navigate('Verify')}>
                        <Text style={styles.buttonText}>
                            Get OTP
                        </Text>
                    </TouchableOpacity>
                    </KeyboardAvoidingView>
                </View>
            </View>
        );
    }
}

const AppNavigator = createStackNavigator(  
    {  
        Login: BuyerLogin,  
        Verify: BuyerVerify  
    },
);  
const AppContainer = createAppContainer(AppNavigator);  

const BuyerLoginForm = () => [
    <BuyerLogin key="1" />,
    <AppContainer key="2" />
]
export default BuyerLoginForm;

  

BuyerVerify.js

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

export default class BuyerVerify extends React.Component{
    render(){
        return(
            <View style={styles.outer}>

                <View style={styles.inner}>

                    <KeyboardAvoidingView style={styles.container}> 
                    <TextInput style={styles.input}
                        placeholder="Enter your contact number"
                        placeholderTextColor="#939eaf"
                        keyboardType="phone-pad"
                     />
                    <TouchableOpacity style={styles.buttonContainer}>
                        <Text style={styles.buttonText}>
                            Get OTP
                        </Text>
                    </TouchableOpacity>
                    </KeyboardAvoidingView>

                </View>

            </View>
        );
    }
}

我想从BuyerLoginForm导航到BuyerVerify屏幕。请帮助我找到解决方案。

Answer 1

我认为您在这里的所有结构都有些混乱。最好始终生成所提供的expo选项卡示例并在其正确设置的基础上进行构建。我建议您像这样设置类和应用程序。

  

BuyerHome.js

import {StyleSheet, Text, View, Image, StatusBar, ImageBackground} from 'react-native';  
import { createBottomTabNavigator, createAppContainer, StackNavigator } from 'react-navigation';  
import Icon from 'react-native-vector-icons/Ionicons';  
import BuyerLoginForm from './component/BuyerLoginForm';

class BuyerHome extends React.Component {  
  render() {  
    const { navigation } = this.props;
    return ( 
        <View style={styles.BuyerContainer}>  
        <ImageBackground source={require('./logo/backround.png')} style={{width: '100%', height: '100%'}}>
        <StatusBar backgroundColor='transparent' translucent barStyle="dark-content" />
            <View style={styles.logoContainer}>
              <Image style={styles.logo} source={require('./logo/applogo.png')} />
            </View>
            <View style={styles.title}><Text>Hey Buyer, please login via your number.</Text></View>
            <View style={styles.formContainer}>
              <BuyerLoginForm navigation={navigation} />
            </View>
            </ImageBackground>
        </View>  
    );  
  }  
}
export default BuyerHome;

  

VendorHome.js

import {StyleSheet, Text, View, Image, StatusBar, ImageBackground} from 'react-native';  
import { createBottomTabNavigator, createAppContainer, StackNavigator } from 'react-navigation';  
import Icon from 'react-native-vector-icons/Ionicons';  
import VendorLoginForm from './component/VendorLoginForm';

class VendorHome extends React.Component {  
  render() {  
    return (  
      <View style={styles.VendorContainer}>  
        <ImageBackground source={require('./logo/backround.png')} style={{width: '100%', height: '100%'}}>
        <StatusBar backgroundColor='transparent' translucent barStyle="dark-content" />
          <View style={styles.logoContainer}>
          <Image style={styles.logo} source={require('./logo/applogo.png')} />
            </View>
            <View style={styles.title}><Text>Hey Vendor, please login via your number.</Text></View>
            <View style={styles.formContainer}>
            <VendorLoginForm />
            </View>
            </ImageBackground>
        </View>  
    );  
  }  
}
export default VendorHome;

  

BuyerLogin.js

import React from 'react';  
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView} from 'react-native';  
import BuyerVerify from '../screens/BuyerVerify';

class BuyerLogin extends React.Component{
    render(){
        return(
            <View style={styles.outer}>
                <View style={styles.inner}>
                    <KeyboardAvoidingView style={styles.container}> 
                    <TextInput style={styles.input}
                        placeholder="Enter your contact number"
                        placeholderTextColor="#939eaf"
                        keyboardType="phone-pad"
                     />
                    <TouchableOpacity style={styles.buttonContainer} onPress={()=> this.props.navigation.navigate('Verify')}>
                        <Text style={styles.buttonText}>
                            Get OTP
                        </Text>
                    </TouchableOpacity>
                    </KeyboardAvoidingView>
                </View>
            </View>
        );
    }
}
export default BuyerLogin;

  

BuyerVerify.js

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

export default class BuyerVerify extends React.Component{
    render(){
        return(
            <View style={styles.outer}>

                <View style={styles.inner}>

                    <KeyboardAvoidingView style={styles.container}> 
                    <TextInput style={styles.input}
                        placeholder="Enter your contact number"
                        placeholderTextColor="#939eaf"
                        keyboardType="phone-pad"
                     />
                    <TouchableOpacity style={styles.buttonContainer}>
                        <Text style={styles.buttonText}>
                            Get OTP
                        </Text>
                    </TouchableOpacity>
                    </KeyboardAvoidingView>

                </View>

            </View>
        );
    }
}
export default BuyerVerify;

  

MainTabNavigator.js

import React from 'react';  
import {StyleSheet, Text, View, Image, StatusBar, ImageBackground} from 'react-native';  
import { createBottomTabNavigator, createAppContainer, StackNavigator } from 'react-navigation';  
import Icon from 'react-native-vector-icons/Ionicons'; 

import BuyerLoginForm from './component/BuyerLoginForm';
import VendorLoginForm from './component/VendorLoginForm';

const HomeStack = createStackNavigator({
  Home: BuyerHome,
});

      HomeStack.navigationOptions:{  
          tabBarLabel:'Buyer',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="ios-basket" color={tintColor} size={25}/>  
          )  
        };  

const ProfileStack = createStackNavigator({
  Profile: VendorHome,
});

      ProfileStack.navigationOptions:{  
          tabBarLabel:'Vendor',  
          tabBarIcon:({tintColor})=>(  
              <Icon name="md-cart" color={tintColor} size={25}/>  
          )  
        };  
export default createBottomTabNavigator({
    {   
      HomeStack,
      ProfileStack
    },    
); 

  

AppNavigator.js

import React from 'react';
import {createSwitchNavigator} from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import BuyerLogin from './components/BuyerLogin';
import BuyerVerify from './components/BuyerVerify';

// every class you would to be able to navigate to that is not part of your tab put here
export default createSwitchNavigator({
      Main: MainTabNavigator,
      Login: BuyerLogin,
      Verify: BuyerVerify

  },
  {
      initialRouteName: 'Main'
  },
);

  

App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View} from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './AppNavigator';


export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  render() {


    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
            <View style={styles.container}>

            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
              <AppNavigator />
            </View>

          );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
      }),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

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

我已经为您提供了组织应用程序的标准方法，现在您的导航应该可以使用了，并且选项卡和应用程序类是分开的。您应该确保为每个类都放置了正确的路径，并可能确保对于我可能错过了一两个的每一个类，导入都是正确的。希望这对您有所帮助，并让您更好地了解了Expo应用程序中应具有的结构以及导航应如何工作。