まとめ: このチュートリアルでは、React Navigation ライブラリを使用して、React Native アプリでボトムタブを作成する方法を学習します。
React Native Bottom タブコンポーネントの紹介
アプリの画面の下部にタブバーを作成するには、React Navigationライブラリのボトムタブを使用します。
ボトムタブでは、異なる画面間を移動できます。各タブはルートを表します。これらのルート間は、タブをタップして移動できます。
ボトムタブは次のものから構成されています。
- タブバー: ナビゲーションタブを含む画面の下部に表示されます。
- アイコンとラベル: 各タブに、ルートを表すアイコンとラベルを持たせることができます。
次の方法でボトムタブをカスタマイズできます。
- スタイルを変更する。
- アニメーションを追加する。
- 動作を変更する。
さらに、ボトムタブをスタックナビゲーターなどの他のナビゲーターとともに使用して、柔軟なナビゲーションオプションを作成できます。
React Navigation で React Native アプリを作成する
このセクションでは、アプリでボトムタブナビゲーターを設定して使用する方法について説明します。
要件
始める前に、次のものがあることを確認してください。
react-native>=0.63.0expo>= 41 (Expo Go を使用する場合は)
新しいプロジェクトの設定
まず、ターミナルを開き、次のコマンドを実行して新しい React Native アプリを作成します。
npx create-expo-app tab --template blankCode language: JavaScript (javascript)このコマンドは tab ディレクトリを作成し、React Native アプリ構造を初期化します。
次に、プロジェクトディレクトリ tab に移動します。
cd tabCode language: JavaScript (javascript)3 番目に、次のコマンドを実行して React Navigation ライブラリとその依存関係をインストールします。
npm install @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-contextCode language: JavaScript (javascript)ボトムタブナビゲーションを作成する
ステップ 1. 画面を格納するための screens ディレクトリをプロジェクトディレクトリに新しく作成します。
ステップ 2. screens ディレクトリに Home 画面を作成します。
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
const Home = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.screen}>
<Text>Home Screen</Text>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});
export default Home;Code language: JavaScript (javascript)ステップ 3. screens ディレクトリに Profile 画面を作成します。
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
const Profile = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.screen}>
<Text>Profile Screen</Text>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});
export default Profile;Code language: JavaScript (javascript)ステップ 4. screens ディレクトリに index.js を作成し、Home と Profile 画面をインポートしてすぐにエクスポートします。
import Home from './Home.jsx';
import Profile from './Profile.jsx';
export { Home, Profile }Code language: JavaScript (javascript)これにより、単一のインポートを使用して、screens ディレクトリからすべての画面を App.js にインポートできます。
import { Home, Profile} from './screens/index';Code language: JavaScript (javascript)ステップ 5. Home と Profile 画面を App.js ファイルにインポートし、Home 画面をメインコンポーネントとして配置します。
import { Home, Profile } from './screens/index';
export default function App() {
return (
<Home />
);
}Code language: JavaScript (javascript)ステップ 6. ターミナルを開き、アプリを実行します。
npm startCode language: JavaScript (javascript)ステップ 7. 再利用可能な React コンポーネントを格納するための components という新しいディレクトリを作成します。components ディレクトリの中で、新しい TabIcon コンポーネントを作成します。
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
const TabIcon = ({ focused, name, size, color }) => {
return <MaterialCommunityIcons name={focused ? name : `${name}-outline`} size={size} color={color} />
};
export const TabIcons = {
home: 'home',
account: 'account',
// more MaterialCommunityIcons with the outline versions here
// ...
}
export default TabIcon;Code language: JavaScript (javascript)TabIcon は、タブにフォーカスされているときにアイコンを表示し、フォーカスが外れているときにそのアウトラインバージョンを表示します。さらに、TabIcon オブジェクトを、MaterialCommunityIcons ライブラリのアイコン名で値を持つ形式でエクスポートします。
ステップ 8. App.js を変更してボトムタブナビゲーターを作成します。
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Home, Profile } from './screens/index';
import TabIcon, { TabIcons } from './components/TabIcon';
const BottomTab = createBottomTabNavigator();
const App = () => {
return (
<NavigationContainer>
<BottomTab.Navigator>
<BottomTab.Screen
name="Home"
component={Home}
options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.home} size={size} color={color} /> }} />
<BottomTab.Screen
name="Settings"
component={Profile}
options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.account} size={size} color={color} /> }}
/>
</BottomTab.Navigator>
</NavigationContainer>
);
}
export default App;Code language: JavaScript (javascript)仕組み
最初に、React Navigation ライブラリから NavigationContainer コンポーネントと createBottomTabNavigator 関数をインポートします。
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';Code language: JavaScript (javascript)次に、Home と Profile の画面だけでなく、TabIcon コンポーネントもインポートします。
import { Home, Profile } from './screens/index';
import TabIcon, { TabIcons } from './components/TabIcon';Code language: JavaScript (javascript)3 番目に、createBottomTabNavigator 関数を呼び出して新しいボトムタブナビゲーターオブジェクトを作成します。
const BottomTab = createBottomTabNavigator();Code language: JavaScript (javascript)ボトムタブナビゲーターには、React Native コンポーネントとなっている2 つのプロパティがあります。
- Navigator
- Screen
最後に、NavigationContainer コンポーネントを、アプリのルートコンポーネントとして使います。
<NavigationContainer>
<BottomTab.Navigator>
<BottomTab.Screen
name="Home"
component={Home}
options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.home} size={size} color={color} /> }} />
<BottomTab.Screen
name="Settings"
component={Profile}
options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.account} size={size} color={color} /> }}
/>
</BottomTab.Navigator>
</NavigationContainer>Code language: JavaScript (javascript)Screen コンポーネントには、name、component、および options のプロパティが含まれます。
nameプロパティは、ナビゲーションに使用されるルート名を指定します。componentプロパティは、レンダリングするコンポーネントを定義します。optionsプロパティは、タブのオプションを決めます。tabBarIconをカスタムTabIconコンポーネントに設定します。
ボトムタブナビゲーターには Home と Profile の2 つのルートがあります。タブを押すと、対応する画面が表示されます。
まとめ
- React Navigation ライブラリーのボトムタブナビゲーターを使用して、アプリにボトムタブを作成します。
