소스 정보
- 저장소
- ffsshhttiikk/opencode-agents-skills
- 최근 소스 활동
- 2026년 2월 28일 22:54
- 감지된 SKILL.md 언어
- 영어
- 스타
- 3
- 포크
- 2
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- react-native
- description
- React Native mobile framework
- license
- MIT
- compatibility
- opencode
- metadata
- {"audience":"mobile-developers","category":"mobile-development"}
## What I do
- Build cross-platform mobile apps with React Native
- Develop using JavaScript/TypeScript with React patterns
- Implement native modules and bridges
- Manage React Native state and navigation
- Optimize app performance
- Work with Expo for rapid development
- Handle platform-specific code
## When to use me
Use me when:
- Building mobile apps with React expertise
- Need to share code between web and mobile
- Rapid prototyping required
- Medium-complexity apps
- Teams familiar with JavaScript/React
- Want native performance with JS developer experience
## Key Concepts
### React Native Architecture
React Native uses a bridge to communicate between JavaScript and native components:
```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ JavaScript │ ──── │ Bridge │ ──── │ Native (iOS) │
│ Thread │ │ (Async Msg) │ │ Thread │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```
### React Native Components
```tsx
import React, { useState } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
const ItemList: React.FC = () => {
const [items, setItems] = useState<string[]>([]);
const addItem = () => {
setItems([...items, `Item ${items.length + 1}`]);
};
return (
<View style={styles.container}>
<FlatList
data={items}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<Text style={styles.item}>{item}</Text>
)}
/>
<Button title="Add Item" onPress={addItem} />
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
item: { padding: 12, fontSize: 16 }
});
```
### State Management
- **useState/useReducer**: Local state
- **Context**: Shared state
- **Redux/Zustand**: Global state
- **React Query**: Server state
### Navigation
- **React Navigation**: Most popular, customizable
- **React Native Navigation**: Native performance
### Expo
Managed workflow with pre-built APIs:
- Camera, Location, Notifications
- Push notifications
- Asset loading
- Over-the-air updates
GitHub에서 보기