Day13 react-navigation でメニュー作成

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】|川西発之 / 陳発暉|note ※※※※※本記事は2018年5月に執筆されました.当時の React Native の環境から変わっている部分もありますので,2020年5月より記事の値段を大幅値下げすると同時に,記事更新や質問等のサポートの対象外とさせて頂きます.m(_ _ )m1/3 【ウェルカム画面編】:799円 → 199円2/3 【ホームタブ編】:899円 → 299円3/3 【プラスボタン編】:999円 → 399円※※※※※
 note.mu

今日から2記事目に突入!ひたすらもくもく。ときどきメモ。

2記事目はタブを作って画面遷移を作っていきます。この記事のいいところは、本当に親切なところです。素晴らしい!

これでタブ遷移の準備は整ったので、動作確認してみましょう。 前回と同じくExpo Developer Toolsの`Run on iOS simulator`をクリックします。

さてここで初めてつまづきました。タブが出ません。
どこで間違った?

App.js の return の中の <WelcomeScreen /> を <NavigatorTab /> にかえてなかった!
⊂(^ω^)⊃セフセフ

ではスペルミスがないかチェックして動作確認してみましょう!

なぜだ…
ここは気づくのに十数分かかってしまいました。

const NavigatorTab を削除してしまっていました!ここは変わらず残り続ける。なので、この時点の App.js はこちらです。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { 
  createAppContainer, 
  createBottomTabNavigator, 
  createSwitchNavigator, 
  createStackNavigator
} from 'react-navigation';

import WelcomeScreen from './screens/WelcomeScreen';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';
import AddScreen from './screens/AddScreen';
import ProfileScreen from './screens/ProfileScreen';
import Setting1Screen from './screens/Setting1Screen';
import Setting2Screen from './screens/Setting2Screen';

export default class App extends React.Component {
  render() {
    const HomeStack = createStackNavigator({ // ←追記部分
      home: { screen: HomeScreen },
      detail: { screen: DetailScreen }
    });
    
    const AddStack = createStackNavigator({ // ←追記部分
      add: { screen: AddScreen }
    });
    
    const ProfileStack = createStackNavigator({ // ←追記部分
      profile: { screen: ProfileScreen },
      setting1: { screen: Setting1Screen },
      setting2: { screen: Setting2Screen }
    });
    
    const MainTab = createBottomTabNavigator({
      homeStack: { screen: HomeStack }, // ←変更部分
      addStack: { screen: AddStack }, // ←変更部分
      profileStack: { screen: ProfileStack } // ←変更部分
    });

    const NavigatorTab = createAppContainer(
      createSwitchNavigator({ // ←変更部分
        welcome: { screen: WelcomeScreen },
        main: { screen: MainTab }
      })
    );

    return (
      <View style={styles.container}>
        <NavigatorTab />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    //alignItems: 'center',
    justifyContent: 'center',
  },
});

これで動作します!

本当は左上に “<” こんな感じのバック矢印ボタンが表示されるはずなんですけど、iOSシミュレーターが遅すぎて表示されません泣(実機テストならすぐ描画されると思います!)。

わたしの Simulator ではこういう風に表示されましたー

左上に Back が表示されていますね!

今日はここまで!
凡ミスで時間をくってしまった!

明日は下層の画面でタブを隠すところから!

シンタックスハイライターを使おう!

この記事中で、ソースコードぐあーって書いて、「シンタックスハイライトしたいなぁ」という欲がわいてきました。

探してみると1つ素敵そうなのが見つかりました。

WordPressでソースコードの記述がめちゃくちゃ簡単に!新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方

WordPressでソースコードの記述がめちゃくちゃ簡単に!新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方 | WEMO ブロックエディター・旧エディターの両方に対応しているシンタックスハイライトプラグイン、「Highlighting Code Block」の使い方を紹介します。クリックだけでコードブロックを簡単に挿入でき、選択した言語に合わせてシンタックスハイライトしてくれます。カラーリングは現在「Light」と「Dark」の2種類。カラーリングの例カラーリングの例このような格好いい表示のコードブロックがめちゃくちゃ簡単に使用できます!シンタックスハイライトの機能自体は「prism.js」を使っています。(より良いカラーリングができるように少しだけ追加処理を加えています。)また、使用できる言語も幅広く、以下の言
 wemo.tech

これをやってみることに。

インストールして有効化しました!

さっそくエディタで試してみると、下側で言語の選択とファイル名の記述ができることがわかります。

とりあえず React Native は無さそうなので、JavaScript を選び、ファイル名を記述します。

行数を表示するにしますが、なぜか表示されないなぜだ… そこはおいおいクリアーしよう。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください