1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

React

react-native-elementでタブのアイコンを表示する

const TabBarIcon = (props) => { return ( <Icon name={props.name} type="ionicon" color={props.focused ? hoge_color : fuga_color} /> ); }; フォントではなく画像を使いたい場合はImageを返す <Scene key="home" initial component={HomeScreen} tabBarLabel='ホーム', icon={({ focused }) => </scene></icon>

ReactVRで目線で操作する機能を実装する

npm i --save react-vr-gaze-button import GazeButton from 'react-vr-gaze-button'; render() { const image = this.renderImage(); return ( <GazeButton onClick={() => this.props.onGaze()} duration={1500}> {time => ( image )} </GazeButton> ) } これで1.5秒注視したら何かする処理が作れる

Reactでエンターキーのイベントを取得する方法

onEnterは存在しない Reactがサポートしているイベントは以下の公式サイトに記載されています。 facebook.github.io onClick のノリで onEnterは無いのかな?と探してみてもありません。 ただし、代わりになるキーイベントがあります。 onKeyDownを使う それ…

WebpackでReactを本番反映する時に行う設定

webpackの各種プラグインを導入 DefinePluginでprocess.env.NODE_ENVを置換する 特定の文字を任意の文字に置き換えることのできるプラグインです。 たとえば、 //webpak.config.js plugins: [ new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.…

ReactNativeにReduxの環境構築をしてみる

プロジェクトの作成 $ react-native init redux_test 必要なライブラリのインストール $ cd redux_test $ npm install $ npm install --save redux react-redux シミュレータ起動 $ rm -rf ios/build $ react-native run-ios たまに前ビルドした結果が残って…