rn 导航栏动态跳转

Love The Way You Lie 2021-07-25 02:58 486阅读 0赞

若报错undefined is not an object (evaluating 	'this.props.navigation.navigate')
    	(1)可能是未按如下方式导入
    	(2)因为路由声明后是全局的,意味着其他组件中要使用导航,需要
    	在路由的组件中将navigation={this.props.navigation}作为参数传递给组件,
    	或在路由的对应页面中将navigation={this.props.navigation}作为参数传递给组件,否则会因为this的指向不一致而报错
    	
    1、跳转
    	(1)函数式组件
    	
    	function xx({navigation})
    	{
    			<Button
    			title='xx'
    			onPress={()=>navigation.navigate('路由name名')}
    			/>
    	}
    
    	(2)类组件
    	
    	export default class xx extendsComponent{
    		
    		render(){
    		方式二:通过解构赋值props
    			const {navigation} = this.props;
    			
    			return(
    			
    				<Button
    				title='xx'
    				方式一:onPress={()=>this.props.navigation.navigate('路由name名')}
    				方式二:onPress={()=>navigation.navigate('路由name名')}
    				/>
    			)
    		}
    
    	}
    
    跳转方式
    	navigation.navigate('路由名'); //不会将相同路由放进栈里
    	navigation.push('路由名');     //会将相同路由放进栈里
    	navigation.goBack();  //返回上一个路由
    	navigation.popToTop('路由名'); //回到栈中第一个路由

代码示例:

import 'react-native-gesture-handler';
    import React,{ Component} from 'react'
    import { Text,View,StyleSheet,Button,ScrollView} from 'react-native'
    import {  NavigationContainer } from '@react-navigation/native';
    import {  createStackNavigator } from '@react-navigation/stack';
    import A from './App21'
    
    function Home({  navigation }){ 
        return (
            <View style={ {  flex:1, alignItems: 'center', justifyContent: 'center' }}>
              <Text>Home Screen</Text>
              <Button
                    title="Go to Details"
                    //导航,相当于go,相当页面不会放进栈里
                    onPress={ () =>navigation.navigate('Details')}
                    color='red'
                    
                ></Button>
    
                <Button
                    title="A"
                    //导航,相当于go,相当页面不会放进栈里
                    onPress={ () =>navigation.navigate('A')}
                    color='red'
                    
                />
            </View>
          );
    }
    function DetailsScreen({ navigation}) { 
        return (
          <View style={ {  flex:1,alignItems: 'center', justifyContent: 'center' }}>
              { /* <ScrollView horizontal={true}> */}
            <Text>Details Screen</Text>
            <Button
            title="Go to Details... again"
            //push会将路由放进堆栈里即使是相同页面
            onPress={ () => navigation.push('Details')}
          />
            <Button
            title="Go to new"
            //push会将路由放进堆栈里
            onPress={ () => navigation.navigate('New')}
           
          />
          <Button title="Go back" onPress={ () => navigation.goBack()} />
    
          <Button
            title="Go back to first screen in stack"
            //返回堆栈中的第一个屏幕
            onPress={ () => navigation.popToTop()}
          />
          { /* </ScrollView> */}
          </View>
        );
      }
      function New({ navigation}) { 
        return (
          <View style={ {  flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>New Screen</Text>
          </View>
        );
      }
    
    
    
    export default class App extends Component{ 
        render(){ 
            const Stack = createStackNavigator();
            return (
                <>
                    <NavigationContainer>
                        <Stack.Navigator initialRouteName="Home">
                            <Stack.Screen name="Home" component={ Home} options={ {  title: 'Overview' }}/>
                            <Stack.Screen name="Details" component={ DetailsScreen} />
                            <Stack.Screen name="New" component={ New} />
                            <Stack.Screen name="A" component={ A} />
                        </Stack.Navigator>
                    </NavigationContainer>
                    
                </>
        
            );
        }
      }

导入的类组件:

import React,{ Component} from 'react'
    import { View,Text,StyleSheet,Button} from 'react-native'
    import FontAwesome from 'react-native-vector-icons/dist/FontAwesome'
    
    export default class App extends Component{ 
    
        render(){ 
            const { navigation}=this.props
            return(
                <>
                   <Text>哈哈哈</Text>
                   <Button 
                   title='go details'
                    onPress={ ()=>navigation.navigate('Details')}
                    //this.props.navigation.navigate('xx')
                   />   
                </>
            )
        }
    }

--------------------

跳转报错代码解决示例:

将navigation作为参数传递,传递的位置是总路由界面或路由对应的界面,确保this指向一致  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/021364baa8bb4e18a5f3351607375fde.png