React Native Course

 

Tạo project

+ Project Expo: expo init AwesomeProject

+ Project CLI: npx react-native init MyProject

run app:

+ Expo: npm start

+ Cli: npx react-native run-android

 

-        flexDirection:

column( Cột ): Căn chỉnh các con từ trên xuống dưới.

row(Hàng ngang): Căn chỉnh con từ trái sang phải.

-        alignItems:

 center: căn giữa theo hướng của flexDirection:

vd:

- flexDirection = ‘row’, alignItems: center => căn giữa dọc

- flexDirection = ‘column’ => căn giữa ngang

 

justifyContent: space-between: căn 2 bên theo hướng cha

flexWrap: ‘wrap’: cho phép xuống hàng

 

Flutter Color:  extendsion vs code=> react native

Native stack navigator: Di chuyển giữa các trang

Info: https://reactnative.dev/docs/navigation

Bottom navigation: muốn sử dụng cái này cần import Native stack navigator trước

Info: https://reactnavigation.org/docs/bottom-tab-navigator/

Use:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

…

<NavigationContainer>

   

    <BottomNavigation></BottomNavigation>

  </NavigationContainer>

 

…

export default function BottomNavigation() {

  return (

    <Tab.Navigator>

        <Tab.Screen name='Home'  component={HomeScreen})/>

        <Tab.Screen name='Login' component={LoginScreen}/>

    </Tab.Navigator>

  )

}

 

Đặt kích thước ảnh không chiếm hết màn hình:

Kích cỡ ảnh trong hình: 631x925

Sử dụng Dimensions để tính toán chiều dài, rộng của màn hình:

1.     import { Dimensions } from 'react-native';

2.     const windowWidth = Dimensions.get('window').width;

const windowHeight = Dimensions.get('window').height;

 

Set proxy powershell:

npm set proxy http://192.168.206.118:10809/ 

 

Chú ý: Sau khi cài xong thư viện nhớ đồng bộ:

cd android

./gradlew clean

 

 

 

Thư viện Icon:

Trang web: https://icons.expo.fyi/

 

 

 

 

Import:

import Icon from 'react-native-vector-icons/dist/AntDesign';

use:

<Icon

  name="right"

  size={18}

  color={Color.textPrimary}>

</Icon>

 

 

Tool debug nâng cao: npx react-devtools

 

ANIMATION:

Event:  đầu và cuối hoạt ảnh

Ví dụ: chạy hoạt ảnh theo 1 trình tự(sequence)

 

UseEffect

useEffect(callback): Call back sẽ chạy sau khi render xong các component

vd: useEffect(()=>{

            console.log(‘this is useEffect’)

})

Return(

            <View>

{console.log(‘this is render’)}

<View/>

)

 

Output:

This is render

This is useEffect

useEffect(callback,[deps]): Chỉ chạy sau khi render và trạng thái deps thay đổi:

-        deps là 1 biến có thể là useState, useRef

vd:

const [name, setname] = useState(‘Thắng’)

useEffect(()=>{

          console.log(‘hello’)

})

Return(

<View>

          <Button title=’changeName’

onPress= ()=>setName(‘ThangDeepTry’)/>  

<View/>)

 

Output:

hello