「基礎から学ぶReact Native入門」の感想・備忘録2

基礎から学ぶReact　Native入門

posted with ヨメレバ

中川幸哉/山田祥寛翔泳社 2021年02月

楽天ブックスで見る

Amazonで見る

Kindleで見る

React Navigation

React Navigation

インストール

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
※ 本文ではバージョン5だが、ここではバージョン6を使用する。

import {Provider as PaperProvider} from 'react-native-paper'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Main from './src/Main'
import Sub from './src/Sub'

const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
          <Stack.Navigator initialRouteName="Main">
            <Stack.Screen name="Main" component={Main} />
            <Stack.Screen name="Sub" component={Sub} />
          </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

ページ遷移

export default function Sub({ navigation }) {
  return (
    <SafeAreaView>
      <Headline>Sub</Headline>
      <Button onPress={() => navigation.navigate('Main')}>Mainへ</Button>
    </SafeAreaView>
  );
}

Tab

インストール

npm install @react-navigation/bottom-tabs

import {Provider as PaperProvider} from 'react-native-paper'
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Main from './src/Main'
import Sub from './src/Sub'

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Main" component={Main} />
          <Tab.Screen name="Sub" component={Sub} />
        </Tab.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

Drawer

インストール

npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated
babel.config.jsに以下を追加
plugins: ["react-native-reanimated/plugin"],

import { Provider as PaperProvider } from "react-native-paper";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import "react-native-gesture-handler";
import Main from "./src/Main";
import Sub from "./src/Sub";

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Main">
          <Drawer.Screen name="Main" component={Main} />
          <Drawer.Screen name="Sub" component={Sub} />
        </Drawer.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}