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
