進捗的には昨日の続きです。

react-navigationを使ってページ遷移を実装する

const Stack = createBottomTabNavigator(
  {
    Main: { 
      screen: Main,
      navigationOptions: ({ navigation }) => ({
        title: 'メイン',
      }),
    },
    ranking: { 
      screen: Ranking,
      navigationOptions: ({ navigation }) => ({
        title: 'ランキング作成',
      }),
    },
    select: { 
      screen: CtrlSelectPrograms,
      navigationOptions: ({ navigation }) => ({
        title: '番組選択',
      }),
    }
  },
  {
    tabBarOptions:{
      activeBackgroundColor: '#f85b73',
      activeTintColor: 'white',
      style:{}
    }
  }

);

下にタブを作ってタブで画面遷移を切り替える形にしました。
screenプロパティで実際に表示するコンポーネントを指定し、
navigationOptionsではタブに表示するラベルをtitleプロパティで指定します。
できる限りannictのテーマカラーを採用していきます。

react-native-elementsを使ってヘッダを実装する

import React from 'react'
import { Header } from 'react-native-elements'

export default class NavBar extends React.Component{
    constructor(){
        super();
    }
    render(){
        return(
            <Header
                //leftComponent={{ icon: 'menu', color: '#fff' }}
                centerComponent={
                    { 
                        text: this.props.title, 
                        style: {
                            color: '#f85b73',
                            fontSize: 16,
                            fontWeight: 'bold'

                        }
                    }}
                //rightComponent={{ icon: 'home', color: '#fff' }}
                //backgroundColor={'#fff'}
                containerStyle={{
                    color:'#f85b73',
                    backgroundColor: '#fff'
            }}

            />
        )
    }
}

画面遷移ではヘッダコンポーネントを共通化するのが難しいようだったので、propsでタイトルを渡して切り替えられるように実装しました。
leftComponentやrightComponentは使わないので一旦オミットします。

原因不明のビルドエラー !?

Invariant Violation: View config not found for name RTCViewというエラーメッセージが出て実行エラーが出る状態に。
【ReactNative】これ。Invariant Violation: View config not found for name input

エラーメッセージの内容が明確でない場合は基本的にパッケージャーの再起動とキャッシュの削除を試します。
キャッシュを削除する方法

しかしいくらやってもエラーが出てこれだけで2時間ぐらい奮闘。
ふと違うスマホでビルドしてみると成功したので、スマホ側のアプリキャッシュを削除するとあっけなく通ったのでした。ぐったり。