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

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

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

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

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

```console
.
├── 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のパッケージのインストールはターミナルで下記のコマンドを実行する

```console
$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;
```

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

![スクリーンショット 2019-06-26 1.24.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263738/602b09d1-a665-0ab4-8439-3066c02ffaba.png)
![スクリーンショット 2019-06-26 1.24.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263738/6822ac50-ce3f-5d08-421f-d98090f96e18.png)