BÀI 21 - REACT NAVIGATING TRONG REACT NATIVE
Tham khảo tại đây
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
React Navigation example
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;