React Native + Expo で開発を始めて画面遷移させるまで

npm i -g expo-cli

expo init my-first-react-native-app

✔ Choose a template: › blank (TypeScript)  same as blank but with TypeScript configuration
- cd my-first-react-native-app
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn web

npm start

› Opening on iOS...
xcrun exited with non-zero code: 2
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Unable to boot device because we cannot determine the runtime bundle.
No such file or directory

npm i react-native-paper

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: ['react-native-paper/babel']
      }
    }
  };
};

import { Provider as PaperProvider } from 'react-native-paper'
import Main from './lib/components/Main'

export default function App() {
  return (
    <PaperProvider>
      <Main />
    </PaperProvider>
  )
}

import React from 'react'
import { Button, Headline, Title } from 'react-native-paper'
import { SafeAreaView, ScrollView } from 'react-native'
import MyCard from './MyCard'

const Main = () => (
  <SafeAreaView>
    <ScrollView>
      <Headline
        style={{
          margin: 15,
        }}
      >
        色んなパーツをごちゃまぜ
      </Headline>
      <Title
        style={{
          margin: 15,
        }}
      >
        タイトルだよ〜
      </Title>
      <Button
        mode={'contained'}
        style={{
          margin: 30,
        }}
      >
        containedなボタン
      </Button>
      <MyCard />
    </ScrollView>
  </SafeAreaView>
)

export default Main

import * as React from 'react'
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper'
import { ReactNode } from 'react'

const LeftContent = (props: ReactNode) => <Avatar.Icon {...props} icon="folder" />

const MyCard = () => (
  <Card
    style={{
      margin: 20,
    }}
  >
    <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />
    <Card.Content>
      <Title>Card title</Title>
      <Paragraph>Card content</Paragraph>
    </Card.Content>
    <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
    <Card.Actions>
      <Button>Cancel</Button>
      <Button>Ok</Button>
    </Card.Actions>
  </Card>
)

export default MyCard

npm i @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm i @react-navigation/stack

import 'react-native-gesture-handler'
import { NavigationContainer } from '@react-navigation/native'
import HomeScreen from './lib/components/HomeScreen'
import { createStackNavigator } from '@react-navigation/stack'
import DetailScreen from './lib/components/DetailScreen'

export type RootStackParamList = {
  Home: undefined
  Detail: undefined
}

const Stack = createStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={'Home'}>
        <Stack.Screen name={'Home'} component={HomeScreen} />
        <Stack.Screen name={'Detail'} component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

import * as React from 'react'
import { Text, View, Button } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { RootStackParamList } from '../../App'

type homeScreenProp = StackNavigationProp<RootStackParamList, 'Home'>
const HomeScreen = () => {
  const navigation = useNavigation<homeScreenProp>()
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text>ホーム画面</Text>
      <Button title={'詳細へ'} onPress={() => navigation.navigate('Detail')} />
    </View>
  )
}

export default HomeScreen

import * as React from 'react'
import { View, Text, Button } from 'react-native'
import { useNavigation } from '@react-navigation/native'

const DetailScreen = () => {
  const navigation = useNavigation()
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text>詳細画面</Text>
      <Button title={'ホームへ'} onPress={() => navigation.goBack()} />
    </View>
  )
}

export default DetailScreen

<Button title={"詳細へ"} onPress={() => navigation.navigate("Detail")} />

TS2345: Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }'.

npm i @react-navigation/bottom-tabs

import 'react-native-gesture-handler'
import { NavigationContainer } from '@react-navigation/native'
import HomeScreen from './lib/components/HomeScreen'
+ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import DetailScreen from './lib/components/DetailScreen'

export type RootStackParamList = {
  Home: undefined
  Detail: undefined
}

+ const Tab = createBottomTabNavigator()
export default function App() {
  return (
    <NavigationContainer>
+      <Tab.Navigator initialRouteName={'Home'}>
+        <Tab.Screen name={'Home'} component={HomeScreen} />
+        <Tab.Screen name={'Detail'} component={DetailScreen} />
+      </Tab.Navigator>
    </NavigationContainer>
  )
}