Module 03 — React Native Cơ bản

🎯 Mục tiêu học tập

• Hiểu RN khác React Web thế nào — tại sao không có DOM, CSS cascade
• Thành thạo Core Components và biết khi nào dùng component nào
• Master Flexbox layout trong RN (default column, Yoga engine)
• Build được responsive UI hoạt động trên cả iOS và Android

📖 Hướng dẫn học

⚡ Ôn nhanh

🧭 Vòng lặp học module này

📚 Lý thuyết chi tiết

1. React Native vs React Web

2. Core Components

Layout Components

Display Components

Interactive Components

List Components

3. Styling & StyleSheet

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f1117',
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#e4e6f0',
    marginBottom: 8,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
});

Không có CSS cascade: Mỗi component phải khai báo style riêng. Text bên trong View không kế thừa color từ View (trừ Text nested trong Text).

4. Flexbox Deep Dive

5. Images

// Local (bundled) - require
<Image source={require('./assets/logo.png')} />

// Remote - uri object
<Image
  source={{ uri: 'https://example.com/photo.jpg' }}
  style={{ width: 200, height: 200 }}
/>

6. TextInput

const [email, setEmail] = useState('');

<TextInput
  value={email}
  onChangeText={setEmail}
  placeholder="Email"
  keyboardType="email-address"
  autoCapitalize="none"
  autoCorrect={false}
  returnKeyType="next"
  style={styles.input}
/>

Keyboard types: default, email-address, numeric, phone-pad, decimal-pad

7. Responsive Design

import { useWindowDimensions, PixelRatio } from 'react-native';

const MyComponent = () => {
  const { width, height } = useWindowDimensions();
  const isTablet = width >= 768;

  return (
    <View style={{ padding: isTablet ? 32 : 16 }}>
      {/* responsive content */}
    </View>
  );
};

8. Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 4,
    },
    android: {
      elevation: 5,
    },
  }),
});

File extensions: Component.ios.tsx / Component.android.tsx — RN tự chọn file đúng platform.

9. KeyboardAvoidingView

10. Ví dụ thực tế: Safe form screen

import { KeyboardAvoidingView, Platform, ScrollView, TextInput } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

function RegisterScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      >
        <ScrollView
          keyboardShouldPersistTaps="handled"
          contentContainerStyle={{ padding: 16, gap: 12 }}
        >
          <TextInput placeholder="Email" keyboardType="email-address" />
          <TextInput placeholder="Password" secureTextEntry />
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

❓ Câu hỏi phỏng vấn + Đáp án

🏋️ Bài tập

⚠️ Lỗi thường gặp

🏢 Case đi làm thật

🧠 Ghi nhớ nhanh

❔ Câu hỏi tự kiểm tra

✅ Checklist tự đánh giá

📎 Tài nguyên