BÀI 21 - REACT NAVIGATING TRONG REACT NATIVE

Tham khảo tại đây

  1. Cài đặt

# First, you need to install them in your project:

npm install @react-navigation/native @react-navigation/native-stack

# Next, install the required peer dependencies. You need to run different commands depending on whether your project is an Expo managed project or a bare React Native project.

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


Màn hình chính thì code tạo Navigation (thanh tiêu đề trang)

  • name: đại diện cho tên màn hình hiển thị.

  • component: liên kết tới màn hình.

  • option: title - tên hiển thị trên thanh tiêu đề.

import * as React from 'react';


import SignIn from './Screens/SignIn';

import SignUp from './Screens/SignUp';


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

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


const Stack = createNativeStackNavigator();


function App() {

return (

<NavigationContainer>

<Stack.Navigator>

<Stack.Screen name="signIn" component={SignIn} options={{ title: 'Đăng nhập' }} />

<Stack.Screen name="signUp" component={SignUp} options={{ title: 'Đăng ký' }} />

</Stack.Navigator>

</NavigationContainer>

);

};


export default App;

  • Để di chuyển giữa các màn hình thì thay đổi name của component Stack.Screen

const SignIn = function ({navigation}) {

function navigate() {

navigation.navigate('signUp');

}

return(

<View style={StyleSignIn.inputAccountInformation}>

<Button style={StyleSignIn.buttonSignIn} uppercase={false} icon={"login"} mode="contained" onPress={navigate}>

Sign in

</Button>

</View>

);

}

export default SignIn;