ReactNative画面遷移

1 はじめに
2 React Navigation
3 React Navigationのインストール
4 実装
5 さいごに
6 おすすめ書籍

はじめに

こんにちはnukkyです。
ブログを書きながらアプリを作成しているのですが、アプリの基本といえば画面遷移ということで今回は画面遷移をやってみようと思います。

React Navigation

今回、画面遷移に使用するライブラリは「React Navigation」を使用したいと思います。ナビゲーション機能を有するライブラリは他にもあるのですが、私自身も初心者ということで公式でも紹介されている「React Navigation」で今回は実装したいと思います。

React Navigationのインストール

ターミナルから「React Navigation」を使用したいプロジェクトに移動し以下を実行してください。

 $npm install --save react-navigation $npm install --save react-native-gesture-handler $react-native link react-native-gesture-handler

$npm install --save react-navigation

$npm install --save react-native-gesture-handler

$react-native link react-native-gesture-handler

「React Navigation」の準備は完了です。

実装

以下は1ソースの中に２画面(2class)用意したサンプルコードになります。

 import React from 'react'; import { View, Text, Button } from 'react-native'; import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => { this.props.navigation.dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Details' }) ], })) }} /> </View> ); } } class DetailsScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> </View> ); } } const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen, }, Details: { screen: DetailsScreen, }, }, { initialRouteName: 'Home', }); export default createAppContainer(AppNavigator);

import React from 'react';

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

import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';

class HomeScreen extends React.Component {

render() {

return (

<Text>Home Screen</Text>

<Button

title="Go to Details"

onPress={() => {

this.props.navigation.dispatch(StackActions.reset({

index: 0,

actions: [

NavigationActions.navigate({ routeName: 'Details' })

}))

}}

</View>

);

}

class DetailsScreen extends React.Component {

render() {

return (

<Text>Details Screen</Text>

</View>

);

}

const AppNavigator = createStackNavigator({

Home: {

screen: HomeScreen,

Details: {

screen: DetailsScreen,

}, {

initialRouteName: 'Home',

});

export default createAppContainer(AppNavigator);

まずは「React Navigation」の機能使用するためにインポートをします。

 import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';

1	import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';

「createStackNavigator」で今回の画面情報を登録しておきます

 const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen, }, Details: { screen: DetailsScreen, }, }, { initialRouteName: 'Home', });