tkt989 🍵 ブログ

日々のメモ

ReactNativeを少しだけ

2017/12/12

インストール

npm install -g create-react-native-app

プロジェクトを作成

create-react-native-app reactnative-tutorial

reactnative-tutorialに以下のファイルが生成されます。

.
├── App.js
├── App.test.js
├── README.md
├── app.json
└── package.json

動かす

ReactNativeはIOSやAndroid向けにネイティブコードへビルドできますが、Expoというアプリを使えばXcodeやAndroidSDKをインストールせずお手軽にアプリの動作を確認することができます。

アプリストアからExpoをインストールしておきます。

その後npm startを実行。 QRコードが出てくるので、Expoから読み込む。 JSファイルのビルドが終了したらアプリの画面がでてきます。

いじる

App.jsは以下になっています。

import React from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 
 
export default class App extends React.Component { 
  render() { 
    return ( 
      <View style={styles.container}> 
        <Text>Open up App.js to start working on your app!</Text> 
        <Text>Changes you make will automatically reload.</Text> 
        <Text>Shake your phone to open the developer menu.</Text> 
      </View> 
    ); 
  } 
} 
 
const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
  }, 
});

Reactとほぼおんなじです。違いはdivやspanの代わりにViewやTextというReatNativeのコンポーネントを使っていることです。

CSSもそのまま動くので、backgroundColorなどを変えればアプリに反映されます。

テキストボックスのTextInputを使って少しいじってみました。

import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {text: ''}
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.input} onChangeText={(text) => this.setState({text})} />
        <Text>{ this.state.text }</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  input: {
    width: '60%',
  }
});

入力した内容を表示するだけの簡単なもの。