Vue Native アーカイブ - inokawablog

【React Native・Vue Native】TabNavigatorのオプションまとめ

オプションをいちいち調べるのが面倒だったのでまとめておきます。   まずは設置方法 一番シンプルな形、下部にタブを設置 const tabNav = TabNavigator( { Home: HomeScreen, Details: DetailsScreen }, { tabBarPosition: “bottom”, tabBarComponent: TabBarBottom } […]

【10分】Vue Nativeでアプリにマップを表示させてマーカーを設置するまで。コピペで簡単

Vue Nativeを使ってアプリにマップを表示させてマーカーを設置 Vue Native はReact Nativeとexpoをラップしているので何も考えずともマップを使うことができます!!   もし環境構築が済んでいない方は、こちらでHello Worldまでのチュートリアルがあるので、環境を整えておいて下さい。 Vue Nativeとは?React Nativeを知らなくてもスマホ […]

Vue Nativeを使ってアプリにいいね!のアニメーションを実装【Lottie】

Vue Nativeを使ってアプリにアニメーションを組み込みます。 instagramやFacebookのいいね!を押した時のアニメーションを実装していきます。これだけでもアプリの雰囲気が大きく変わるのでぜひやってみてください。 実は、expoはデフォルトでLottieをサポートしています。なので、Vue Nativeには最初から簡単にアニメーションを使用することができます。   今回は […]

React Native ElementsをVue Nativeで使う場合に気をつけること

公式サイトではReact Nativeの形で書かれているのでそのままではVue Nativeでは使用することができません。 なのでReact NativeからVue Nativeに変換をします。   まず、React Native Elementsをインストールしましょう yarn add react-native-elements     例でアバター一覧を表示させ […]

【レイアウト】React Native と Vue Native のスタイルを詳しく説明

最初、スタイルを調整していく中でちょっとした違和感や、ちょっと詰まったところがあったので、紹介します。   React Native と Vue Native のスタイル 今後やっていくにつれて新しい発見やつまるところがあると思うので、その都度更新していきます。   flex これは慣れるまでは結構大変です。細かく説明していきます。 flexとはざっくり説明すると、要素に占める […]