React-NavigationのStackと似ているのだが、①依存するライブラリーのインストールとと②設定をいじる必要がある。
Drawerを使用するなら、React-Navigationのバージョンはすべて@6でインストールしておかないとエラーに悩まされる。
①Drawer Navigator | React Navigation
react-native-gesture-handler と、react-native-reanimatedをインストール
②babel.config.jsを下記のように①を追記する。
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'], ・・・・①
};
};
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TextInput, Button, ScrollView } from 'react-native';
import { useState} from 'react';
import { createStackNavigator} from '@react-navigation/stack';
import { NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
function HomeScreen(){
return(
<View>
<Text>HomeScreen</Text>
</View>
)
}
function RegisterScreen(){
return(
<View>
<Text>RegisterScreen</Text>
</View>
)
}
export default function App() {
const Drawer = createDrawerNavigator();
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen}/>
<Drawer.Screen name="Register" component={RegisterScreen}/>
</Drawer.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
