6月
01

React-nativeでNavigationを使って画面遷移をする時

https://reactnavigation.org/docs/hello-react-navigation/

サンプルプログラムでは1つのファイルに遷移先含めて入れている。

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

ページ数が増えてきたり複雑になってきたりすることを想定して別スクリーンの内容は別ファイルにしたい。

フォルダを作る

適当にページを入れるフォルダを作ります

import文を書く

import HomeScreen from "./pages/Home"
import DetailScreen from "./pages/Details"

Stack.ScreenのあるApp.jsでそれぞれのcomponentを先ほど置いたpagesの中身から取るようにimport文を書きます。

pagesの中にimportに対応するjsファイルを作ります。

それぞれにページの内容を記述します

import * as React from 'react';
import { View, Text, Button } from 'react-native';


export default ({route, navigation}) => {

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button
                title="Go to Details... again"
                onPress={() => navigation.push('Detail')}
            />
        </View>
    );


}

値を渡す場合も一つのコードの中で書いてた時と同じように

<Button onPress={ ()=> navigation.navigate("Individual",{
    content: elem.jobDetail,
    id: elem.id,
    done: elem.done
 })} title={""}/>

と言う形で渡せば

route.id

のような形で受け取れます。

About the Author

Leave a Reply