1日1%成長するブログ

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

ReactNativeのbuild.gradleって何？

build.gradle

Gradle

Groovy

bunild.gradleの中身

  • 以下がReactNativeの初期状態のbuild.gradle
  • buildscriptブロック内のclasspathに外部のプラグインのjarファイルを指定することでプロジェクト内に追加することができる
  • classpath 'com.google.gms:google-services:3.0.0' はGoogleのサービス(Firebase等)をAndroidアプリ内で使うために必要なプラグイン
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
        classpath 'com.google.gms:google-services:3.0.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}
  • classpath追加後にapply plugin: xxと書くことで見つけた外部プラグインを実際に適用し使うことが出来る

Golangでネストした構造体を初期化する方法

Golang プログラミング

次のようにネストした構造体が存在する場合に、 Golangでは初期化の方法が非常に面倒くさい。

type User struct {
    ID        int
    Name  string
    Account struct {
      Password string
      AccessToken string
    }
}

func main() {
    user := User{
      ID: 1,
      Name: "Masaru",
      Account: struct{
          Password string
          AccessToken string
      }{
          Password: "hogehoge",
        AccessToken: "fugafuga",
      },
    }
    fmt.Println(user)
}

こんな感じでネストした構造体の構造と値を別々で書かないと初期化出来ない。 最初結構嵌ったので、メモ。

ReactNativeでAndroidのシミュレーターを起動する

Androidの場合は事前にAndroid Virtual Deviceを追加しておく必要がある。

AVDマネージャーを起動する

Android Studioを起動して[Tools] > [Android] > [AVD Manger]

gyazo.com

AVDを追加して起動する

端末は色んな種類がありますが、自分はNexus 5 API23を使ってます。 追加したらActionsから起動ボタンを押します。

gyazo.com

index.android.jsを用意する

こんな感じでAndroid用の起動ファイルを用意します。 IOSと記述は全く同じでOK

import { AppRegistry } from 'react-native';
import App from './src/app';

AppRegistry.registerComponent('sample', () => App);

React-Nativeのシミュレーターを実行する

AVDを起動した状態で react-native run-androidを実行します。 これでうまくいくはずです。

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

プログラミング ReactNative React Redux JavaScript

プロジェクトの作成

$ react-native init redux_test

必要なライブラリのインストール

$ cd redux_test
$ npm install
$ npm install --save redux react-redux

シミュレータ起動

$ rm -rf ios/build
$ react-native run-ios

たまに前ビルドした結果が残っていてエラーになる時があるので、 ios/build以下を消してからシミュレータを実行するようにしています。

こんな画面が出ればOKです。

f:id:masaru_furuya:20170913204549p:plain

Reactのコード用のディレクトリを作成

$ mkdir src
$ cd src

Providerコンポーネントを作成

import reducers from './reducers';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { View, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Provider store={createStore(reducers)}>
        <View>
          <Text>Hello World</Text>
        </View>
      </Provider>
    )
  }
}

Providerコンポーネントのpropsにstoreを渡すことで、Store内に保存されたstateを子のコンポーネントに渡すことができます。

combineReducerの用意

$ mkdir src/reducers
$ touch src/reducers/index.js

import { combineReducers } from 'redux';

export default combineReducers({
  hoge: () => { return { name: 'hoge' } }
});

Reducerが無いとcreateStoreで怒られるので、仮のReducerを用意します。

index.ios.jsとindex.android.jsを書き換え

import {
  AppRegistry,
} from 'react-native';

import App from './src/App';

AppRegistry.registerComponent('redux_test', () => App);

元のコードを全部消して前に定義したApp.jsを読み込むように変更します。

f:id:masaru_furuya:20170913210444p:plain

これで上記のように画面の左上にHello Worldが表示されればReduxの最低限の環境構築は完了です。

はてなブログにソースコードを貼り付ける方法

ソースコードはGistで貼っていましたが、Gistにアップロードして それを記事で読み込んでの繰り返しが面倒過ぎたので別の方法を探しました。

結論、Markdownを有効にして```で囲むのが一番手軽でした。

package main

import "fmt"

func main() {
    i := 42
    p := &i
    fmt.Println(*p)
    *p = 84
    fmt.Println(*p)
}

こんな感じになります。