Hiệu ứng chuyển màn hình trong ứng dụng ReactNative

Ứng dụng viết bằng ReactNative sử dụng thư viện react-native-navigation để điều hướng các màn hình. Thư viện này có tích hợp sẵn animation giúp chuyển đổi màn hình có hiệu ứng đẹp. Để thực hành demo, ứng dụng mới tạo cần có navigation https://reactnavigation.org/ và có 2 component screen.

Các bước thực hiện:

Bước 1: Sau khi có project, tiến hành cài thư viện navigation

npm install @react-navigation/native 
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/stack 
npm install --save react-native-gesture-handler

Xem chi tiết tại https://reactnavigation.org/docs/stack-navigator

Bước 2: Tạo component và code chuyển màn hình

Trong phần ví dụ này sẽ làm việc trên 1 file App.tsx

import { Button, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { createStackNavigator } from '@react-navigation/stack' // bỏ chữ Native
import { NavigationContainer } from '@react-navigation/native'


const Screen1 = (props)=>{
 return (
   <View style={{ flex:1, backgroundColor: 'yellow'}}>
     <Text>Screen 11111 </Text>
     <Button title='Sang màn 2'
     onPress={()=>props.navigation.navigate('Screen2')}/>
   </View>
 )
}
const Screen2 = ()=>{
 return (
   <View style={{ flex:1, backgroundColor: 'cyan'}}>
     <Text>Screen 2222 </Text>
   </View>
 )
}

const StackDemo = createStackNavigator(); 


const App = () => {
 return (
   <NavigationContainer>
     <StackDemo.Navigator initialRouteName='Screen1'
       screenOptions={ { headerShown: false}}
     >
       <StackDemo.Screen name='Screen1' component={Screen1} />
       <StackDemo.Screen name='Screen2' component={Screen2} />


     </StackDemo.Navigator>
   </NavigationContainer>
 )
}


export default App

const styles = StyleSheet.create({})

Bước 3: Chạy ứng dụng để kiểm tra việc chuyển đổi màn hình

Sử dụng lệnh:

npm start -- --reset-cache

Bước 4: Cải tiến ứng dụng thêm hiệu ứng

Sau khi chạy được ứng dụng thành công thì cải tiến thêm hiệu ứng chuyển màn hình

<StackDemo.Navigator initialRouteName='Screen1'
      screenOptions={ { headerShown: true,
       cardStyleInterpolator: ( {current, layouts }) => (
         {
           cardStyle:{
             // các thuộc tính hiệu ứng viết ở đây:
             opacity: current.progress,//thay đổi độ trong suốt theo quá trình hiển thị
             transform: [
               {
                  translateX: current.progress.interpolate({
                   inputRange:[0,1],
                   outputRange:[layouts.screen.width, 0]
                  })
               },
               {
                 scale: current.progress.interpolate({
                   inputRange:[0,1],
                   outputRange:[0.5,1]
                 })
               }
              
             ]
           }
         }
       )

      }}
    >

Chú ý không quên chạy lại lệnh như ở bước 3

Tham khảo thêm các hiệu ứng tại https://reactnavigation.org/docs/shared-element-transitions/