質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

1665閲覧

react-nativeチュートリアル

MasakazuFukami

総合スコア1869

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2015/10/24 07:16

いつもお世話になっております。

今、react-nativeを勉強しています。


React入門(7):React NativeでiOSアプリケーションを開発してみた

ここを参考に作成しているのですが、

【TabBarを追加する】という項目で

javascript

1'use strict'; 2 3var React = require('react-native'); 4var FeaturedTab = require('./FeaturedTab.js'); 5var SearchTab = require('./SearchTab.js'); 6 7var { 8 AppRegistry, 9 StyleSheet, 10 Text, 11 View, 12 TabBarIOS 13} = React; 14 15var Qiita_Reader = React.createClass({ 16 getInitialState: function(){ 17 return( 18 { 19 selectedTab: 'FeaturedTab' 20 } 21 ); 22 }, 23 render: function() { 24 return ( 25 <TabBarIOS selectedTab={this.state.selectedTab}> 26 <TabBarIOS.Item 27 selected={this.state.selectedTab === 'FeaturedTab'} 28 icon={{uri: 'featured'}} 29 onPress={() => { 30 this.setState( 31 {selectedTab: 'FeaturedTab'} 32 ); 33 }} 34 > 35 <FeaturedTab /> 36 </TabBarIOS.Item> 37 <TabBarIOS.Item 38 selected={this.state.selectedTab === 'SearchTab'} 39 icon={{uri: 'search'}} 40 onPress={() => { 41 this.setState( 42 {selectedTab: 'SearchTab'} 43 ); 44 }} 45 > 46 <SearchTab /> 47 </TabBarIOS.Item> 48 </TabBarIOS> 49 ); 50 } 51}); 52 53var styles = StyleSheet.create({ 54 container: { 55 flex: 1, 56 justifyContent: 'center', 57 alignItems: 'center', 58 backgroundColor: '#F5FCFF', 59 }, 60 welcome: { 61 fontSize: 20, 62 textAlign: 'center', 63 margin: 10, 64 }, 65 instructions: { 66 textAlign: 'center', 67 color: '#333333', 68 marginBottom: 5, 69 }, 70}); 71 72AppRegistry.registerComponent('Qiita_Reader', () => Qiita_Reader);

とあり、

javascript

1icon={{uri: 'featured'}}

とあるのですがxcodeでビルドしてもアイコンが表示されません。

イメージ説明

これはなぜなのでしょうか?
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自分も同じ所で迷ってたので。

システムで定義されたアイコンを使うときは、**icon={{uri: 'featured'}}**ではなく、systemIconを使って

systemIcon='featured'

とするようです。
iconを使うときは、↓のような感じのようです。

var base64Icon = 'data:image/png;base64,hogehoge=='; ~ render: function() { return ( <TabBarIOS tintColor="white" barTintColor="darkslateblue"> <TabBarIOS.Item icon={{uri: base64Icon, scale: 3}} > </TabBarIOS.Item> </TabBarIOS> ); }, ~

投稿2015/11/03 06:46

kanakogi

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MasakazuFukami

2015/11/09 09:51

ありがとうございます!!! systemiconで実装することができました!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問