React Native React Navigationで画面遷移 〜メモ１〜

はじめに

React Navigationを使用して、起動画面からホーム画面、ホーム画面から起動画面へと簡単に画面遷移をさせるプログラムを作成しました。

必要なパッケージのインストール

まず、ターミナルでパッケージをインストールし、リンクを設定する。

$yarn add react-navigation
$yarn add react-native-gesture-handler
$react-native link react-native-gesture-handler

フォルダー構成

今回作成するプログラムのフォルダー構成は下記になります。

.
├── node_modules
├── android
├── ios
├──  src
 ├── screens
   └── HomeScreen.js
   └──  StartScreen.js
 └──  navigation
   └── AppNavigator.js
├──_tests_
├── App.js
├── package.json
├── yarn.lock
├── index.js
├── app.json
├── babel.config.js
├── metro.config.js

以下のソースではNative Baseを使用しているので
native baseのパッケージのインストールはターミナルで下記のコマンドを実行する

$yarn add native-base

簡単に画面繊維するプログラムを作成する

App.js

import React, {Component} from 'react';
//ローカルインポート
import AppNavigator from './src/navigation/AppNavigator';

export default class App extends Component{
  render() {
    return (
      <AppNavigator />
    );
  }
}

AppNavigator.js

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

//ローカルインポート
import StartScreen from '../screens/StartScreen';
import HomeScreen from '../screens/HomeScreen';

//起動画面
const Start = {
  screen : StartScreen,
  navigationOptions : ({ navigation }) => {
    return {title: '起動画面',};
  },
}

//ホーム画面
const Home = {
  screen : HomeScreen,
  navigationOptions : ({ navigation }) => {
    return {title: 'ホーム画面',};
  },
};

const MainNavigation = createStackNavigator({
    Start,
    Home,
  },{
    mode: 'card',
    //headerMode: 'none',
    initialRouteName: 'Start', //最初に表示させる画面を設定
  },
);

export default AppNavigator = createAppContainer(MainNavigation);

HomeScreen.js

import React, {Component} from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { Container, Button, Text, View } from 'native-base';

class HomeScreen extends Component{
  render(){
    return (
      <Container>
        <View style={styles.view}>
          <Button
            onPress={() => this.props.navigation.navigate('Starthi')}
            transparent
            style={styles.button}
          >
            <Text style={styles.text}>起動画面へ</Text>
          </Button>
        </View>
      </Container>    
    );
  }        
}

const styles = StyleSheet.create({
  view:{
    flexDirection:'row',
    justifyContent: 'center',
  },
  button:{
    top:Dimensions.get('window').height/2 - 100,
    shadowOffset: {
      width: 0.5,
      height: 0.5,
    },
    shadowOpacity: 0.25,
    backgroundColor:'rgba(200,200,200,0.6)',
  },
  text:{
    fontSize:20,
  }
});

export default HomeScreen;

StartScreen.js

import React, {Component} from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { Container, Button, Text, View } from 'native-base';

class StartScreen extends Component{
  render(){
    return (
      <Container>
        <View style={styles.view}>
          <Button
            onPress={() => this.props.navigation.navigate('Home')}
            transparent
            style={styles.button}
          >
            <Text style={styles.text}>ホーム画面へ</Text>
          </Button>
        </View>
     </Container>   
    );
  }        
}

const styles = StyleSheet.create({
  view:{
    flexDirection:'row',
    justifyContent: 'center',
  },
  button:{
    top:Dimensions.get('window').height/2 - 100,
    shadowOffset: {
      width: 0.5,
      height: 0.5,
    },
    shadowOpacity: 0.25,
    backgroundColor:'rgba(200,200,200,0.6)',
  },
  text:{
    fontSize:20,
  }
});
export default StartScreen;

結果

動きは超単純で、
'起動画面へ'を押下するとホーム画面へ遷移
'ホーム画面へ'を押下すると起動画面へ遷移