react-native開発用IDEのDECOを使ってみた

react-native開発用IDEのDECOを使ってみた

みなさんこんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。

react-nativeをはじめてみたものの、ES6の書き方とかわからない、Stateってなんや、コンポーネント多すぎてわからんちんな方におすすめのIDEがあります。

オープンソフトで無料のIDE「DECO」です。

サイトはこちら
https://www.decosoftware.com/

componentはこちらで管理されているようですね。
https://github.com/decosoftware/deco-components

使い方のビデオはこちら
https://www.youtube.com/watch?time_continue=245&v=DmZEWOumVIE

早速使ってみた

今回の目標は最低限のコードで最低限の機能を試すことです。スタイルは基本的にいじりません。

まずは新規プロジェクトを作成します。

このまま一旦デスクトップなどに保存してから、
⌘+B でプロジェクトをビルドして動かしてみます。

特に何事も無くビルド出来た模様…　表示が無いです。

シミュレーターを起動してみます。
今回はiphone6を選択します。

それではDECOの独自機能のコンポーネントの追加をしてみましょう。
一番簡単そうなTextInputをドラッグアンドドロップで挿入してみます。

こんな画面になりました。

TextInputをアレンジしてみよう

以下のように編集してアプリっぽくしてみましょう。

　class Project extends Component {
  constructor(props){
    super(props)
    this.state ={
      text: null
    }
  }
  render() {
    return (
    <View style={styles.container}>
      <Text>
        {this.state.text}
      </Text>
      <TextInput style={{ height: 30, width: 100, borderWidth: 1, borderColor: "rgba(0,0,0,0.5)", }} placeholder={'Type here'} placeholderTextColor={"rgba(198,198,204,1)"} onChangeText={(text) => {this.setState({text})}}
        onSubmitEditing={() => {this.setState({text: ''})}}
        value={(this.state && this.state.text) || ''}
      /> 
    </View>
    );
  }
}

名前を打つと画面に表示されるようになりました。

スイッチを追加してみた

同じようにドラッグしてスイッチを挿入します。
これだけでは味気ないので、もう少し遊んでみましょう。

renderの直下に以下を追加します

  render() {
    if(this.state.switchValue == true) {
      switchValue = <Text>Your Switch is On!</Text>
    }
    else{
      switchValue = <Text>Your Switch is Off!</Text>
    }

Viewの好きなところに以下を挿入します。

　　 {switchValue}

<Text>などで囲わないようにして下さいね。

以下のように画面上にスイッチが表示され、切り替えるとメッセージも変化するようになったはずです。

他にもあるよ

全部は確認できてはいないですが、
toggle buttonなど、DECOオリジナルのコンポーネントも存在し、導入してみるとnpm installが自動でスタートする親切ぶりでした。
ただ、実はエラーで動かなかったので、そのあたりについては次回レポートします！