ローディング中

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

早速使ってみた

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

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

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

Screen Shot 2016-08-12 at 16.22.52

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

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

Screen Shot 2016-08-12 at 16.42.33

 

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

Screen Shot 2016-08-12 at 16.46.17
こんな画面になりました。

Screen Shot 2016-08-12 at 17.28.26

 

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>
    );
  }
}

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

Screen Shot 2016-08-12 at 17.28.26

 

スイッチを追加してみた

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

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>などで囲わないようにして下さいね。

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

Screen Shot 2016-08-12 at 18.23.46

 

他にもあるよ

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.