🎉 Welcome to React Native Tutorial

React Native is a powerful framework for building cross-platform mobile apps using JavaScript. Whether you're a web developer or new to mobile app development, this guide will help you get started with creating your first React Native application. Let's dive in!

📚 Getting Started

1. Install Requirements

• Node.js (https://nodejs.org)
• Android Studio (for Android development)
• Xcode (for iOS development)

2. Setup React Native Environment

npm install -g react-native-cli

Follow the official setup guide for detailed steps.

🚀 Your First App

3. Create a New Project

npx react-native init MyFirstApp
cd MyFirstApp
npx react-native run-android
# or
npx react-native run-ios

You'll see a "Hello, World!" screen 📱✨.

4. Core Concepts

• Components (like building blocks)
• JSX (JavaScript XML syntax)
• State & Props (data flow mechanism)

🧱 Building UI Components

5. Basic Component Structure

import React from 'react';
import { View, Text } from 'react-native';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Hello React Native!</Text>
  </View>
);

export default App;

Use component library to explore more UI elements.

🔄 State Management

6. Use State Hook

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

Check out state management patterns for advanced use cases.

🧭 Navigation Setup

7. Implement Navigation

Use react-navigation library to add navigation between screens.
Install with:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

See navigation documentation for full implementation.

🌐 Network Requests

8. Fetch Data from API

import React, { useEffect, useState } from 'react';

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error(error);
  }
};

useEffect(() => {
  fetchData();
}, []);

Explore API integration tutorials for more details.

❓ Common Issues

• "Metro Bundler is not running" → Run npx react-native start in a new terminal
• "Android emulator not found" → Ensure Android SDK is properly configured
• "iOS build failed" → Check Xcode project settings and entitlements

📚 Expand Your Knowledge

React Native官方文档 is your ultimate resource for deep dives into the framework.
For practical examples, visit our sample projects repository.

Let us know if you need help with specific features! 🌟