アプリはこちら。
アニメ視聴管理サービス「Annict」が提供している外部APIを使ったWEBサービス。
2016.11~
2019.11リニューアル
annictクライアント…は無理かもしれませんが。
ちょっと探したら「あにこれ」にはある機能なのですが、
アニメ視聴管理に使っているannictのデータを使って作りたいなーと思っています。
進捗的には昨日の続きです。
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のテーマカラーを採用していきます。
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時間ぐらい奮闘。
ふと違うスマホでビルドしてみると成功したので、スマホ側のアプリキャッシュを削除するとあっけなく通ったのでした。ぐったり。
1-10位ぐらいまでのシェア機能つけたい
playストア公開