React Nativeの文法は、Reactの文法と非常に似ていますが、React Native特有の構文やルールがあります。以下に、基本的なReact Nativeの文法と特徴を紹介します。
1. 基本構文
React NativeのコードはJavaScript（またはTypeScript）で書かれています。
import React from ‘react’;
import { Text, View } from ‘react-native’;
const App = () => {
return (
<View>
<Text>Hello, React Native!</Text>
</View>
);
};
export default App;
- View: React Nativeで使うコンテナ。HTMLのdivに似ています。
- Text: テキストを表示するためのコンポーネント。HTMLの<p>や<span>に相当します。
2. コンポーネント
React Nativeでは2種類のコンポーネントが作成できます。
関数コンポーネント
軽量で、React Hooksを使うことができます。
const MyComponent = () => {
return (
<View>
<Text>これは関数コンポーネントです。</Text>
</View>
);
};
クラスコンポーネント
React Hooksを使う前からの標準的な書き方。
import React, { Component } from ‘react’;
import { View, Text } from ‘react-native’;
class MyComponent extends Component {
render() {
return (
<View>
<Text>これはクラスコンポーネントです。</Text>
</View>
);
}
}
3. スタイル
React Nativeでは、スタイルはオブジェクト形式で記述します。
import { StyleSheet } from ‘react-native’;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#f5f5f5’,
},
text: {
fontSize: 20,
color: ‘#333’,
},
});
スタイルの適用方法
<View style={styles.container}>
<Text style={styles.text}>スタイルが適用されました。</Text>
</View>
- flex: 1: コンテナが画面全体を占める。
- justifyContent: 子要素の縦方向の配置を制御。
- alignItems: 子要素の横方向の配置を制御。
4. 状態管理 (State)
React NativeでuseStateを使う例：
import React, { useState } from ‘react’;
import { Text, Button, View } from ‘react-native’;
const CounterApp = () => {
const [count, setCount] = useState(0);
return (
<View style={{ padding: 20 }}>
<Text>カウント: {count}</Text>
<Button title=”増やす” onPress={() => setCount(count + 1)} />
</View>
);
};
export default CounterApp;
5. イベント処理
React Nativeのイベント処理は、Reactに似ていますが、React Native特有のイベントハンドラもあります。
import React from ‘react’;
import { Button, Alert, View } from ‘react-native’;
const App = () => {
const showAlert = () => {
Alert.alert(‘ボタンが押されました！‘);
};
return (
<View>
<Button title=”押してね” onPress={showAlert} />
</View>
);
};
export default App;
- onPress: ボタンやTouchable要素のタップイベント。
6. ナビゲーション
React Nativeではreact-navigationを使って画面遷移を実現します。
bash
npm install @react-navigation/native react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated
サンプルコード
import React from ‘react’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import { Text, View, Button } from ‘react-native’;
const Stack = createStackNavigator();
const HomeScreen = ({ navigation }) => (
<View>
<Text>ホーム画面</Text>
<Button title=”次へ” onPress={() => navigation.navigate(‘Details’)} />
</View>
);
const DetailsScreen = () => (
<View>
<Text>詳細画面</Text>
</View>
);
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=”Home” component={HomeScreen} />
<Stack.Screen name=”Details” component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
7. デバイスAPIの利用
React NativeはデバイスAPIにもアクセスできます（カメラ、位置情報、センサーなど）。
例: 位置情報取得
bash
npm install @react-native-community/geolocation
import React, { useEffect } from ‘react’;
import { Text, View } from ‘react-native’;
import Geolocation from ‘@react-native-community/geolocation’;
const App = () => {
useEffect(() => {
Geolocation.getCurrentPosition(
position => {
console.log(position.coords);
},
error => {
console.log(error);
},
);
}, []);
return (
<View>
<Text>位置情報を取得中…</Text>
</View>
);
};
export default App;
8. サードパーティライブラリ
React Nativeでは、サードパーティライブラリを利用することが一般的です。例えば：
- Axios: API通信
- React Native Vector Icons: アイコン
- React Native Maps: 地図
- Redux: 状態管理
まとめ
React NativeはReactを基盤にしており、ViewやTextのようなモバイル特有のコンポーネントを使うのが特徴です。また、デバイスAPIやナビゲーションライブラリを活用して、ネイティブアプリらしい機能を追加することができます。質問があればさらに詳しく説明します！