rn 导航栏 动态跳转

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')
               />   
            </>
        )
    }
}