react-native路由 页面跳转

Stack导航

一、下载react-navigation

npm install @react-navigation/native

二、下载插件

npm install react-native-screens react-native-safe-area-context

三、react-native-screens配置

1、在android/app/src/main/java/<your package name>/MainActivity.java加入以下代码

public class MainActivity extends ReactActivity {
  // ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

2、在该文件引入其他文件后添加以下代码：

import android.os.Bundle;

四、在app.js或者index.js中引入，并使用NavigationContainer包裹

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';


export default function App() {
  return (
 <NavigationContainer>
  
    </NavigationContainer>
  );
}

五、下载react-navigation/native-stack

npm install @react-navigation/native-stack

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Login from './Login'

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

六、在需要跳转的页面引入useNavigation

import { useNavigation } from '@react-navigation/native';
.......


export default function Login(){
    const navigation=useNavigation()
    return(
      <View>
         <Button title='去注册' onpress={()=>navigation.navigate('Login')}></Button>
       </View>
    )
}

七、跳转上一个页面navigation.goBack()

import { useNavigation } from '@react-navigation/native';

const navagation=useNavigation()

<TouchableOpacity
    onPress={()=>navigation.goBack()}
    >
    <Image
        source={require('../../assets/images/return.png')}
        style={[styles.backIcon]}
        />

八、跳转传参以及接收参数

1、传参

//pamars为传递参数
navigation.navigate('Scan',{data:pamars})

2、接收

import { useNavigation } from '@react-navigation/native';
.......

//接收的组件接收route参数
export default function Scan({route}){
    const navigation=useNavigation()
    //传递的参数  输出查看
    const parama=route.params
    return(
      <View>
         <Button title='去注册' onpress={()=>navigation.navigate('Login')}></Button>
       </View>
    )
}

具体详细可见官网 Moving between screens | React Navigation