React Native 導入編 - ついんてっく

React NativeのShow Caseを作成

どうも兄です
React Nativeでアプリを作れるようになってきてはいますが、機能の網羅や、気になっているawesomeのチェックがまだまだできていません。

targetはReact Native 0.26

github.com awesomeの気になっているライブラリのShowCaseを作りたいと思います。

初期処理

まずはプロジェクトを作成します。これは、すでにセットアップができた状態とします。

react-native init ReactNativeShowCases

初期化処理が走り、プロジェクトが作成されます。現段階(2016/5時点)で0.26です。0.25から変わって使えなくなっているライブラリもあります。どのバージョンを使うかは検証する必要があるでしょう。

プロジェクト構成

せっかくなので、画面繊維はwebっぽくできるように GitHub - aksonov/react-native-router-flux: React Native Router based on new React Native Navigation APIを使いたいと思います。 React.jsのroutingのdefact standardのreact-routerっぽくかけて、遷移画面を一元管理できるのでとても便利です。また、TabやDrawerが簡単に実装できたり、Reduxに対応してたりなど、めっちゃawesome!!!

エントリポイント修正

index.ios.jsとindex.android.jsがエントリポイントとなります。まずはここから修正しましょう。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { AppRegistry,} from 'react-native';
import App from './app/app'

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

「ReactNativeShowCases」はNativeに登録されているアプリの名前でよっぽどのことがない限り変えない方が良いでしょう。最初のエントリポイントをAppに変更します。

app/app.jsを作成し、以下のファイルを追加します。

import React from 'react';                 ①
import {
    View, 
    ScrollView,
    TouchableWithoutFeedback,
    ListView, 
    StyleSheet, 
    Text, 
    TouchableHighlight
} from 'react-native';

var data = [
    // react native doc
    "ActivityIndicatorIOS",
    "DatePickerIOS",
    "DrawerLayoutAndroid ",
        // 割愛
]
class Row extends React.Component{
    _onClick() {
        alert(this.props.data);
    }

    render(){
        return(
            <TouchableHighlight onPress={this._onClick.bind(this)}>
                <View style={styles.row}>
                    <Text style={styles.text}>
                        {this.props.data}
                    </Text>
                </View>
            </TouchableHighlight>
        );
    }
}

class ShowCasePage extends React.Component {　　②
    constructor(props) {
        super(props);
    
        this.state = {
            rowData: data
        };
    }

    render(){
        const rows = this.state.rowData.map((row, ii) => {
            return <Row key={ii} data={row} onClick={this._onClick}/>;　③
        });     
        return(
            <ScrollView 
                style={styles.scrollview}>
                {rows}
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({　　　④
    row: {
        borderColor: 'grey',
        borderWidth: 1,
        padding: 20,
        backgroundColor: '#3a5795',
        margin: 5,
    },
    text: {
        alignSelf: 'center',
        color: '#fff',
    },
    scrollview: {
        flex: 1,
    },
});

export default ShowCasePage;　　　⑤

流れとしては、

必要なライブラリをimportします。基盤の'react'、コンポーネントの'react-native'、npm packageやプロジェクトのコンポーネントなどでしょう
Viewを作成します。今回はスクロールするViewに、Viewを積んでいってListViewに似たコンポーネントを作りたいと思います。
独自のコンポーネントはJSX形式で簡単に追加できます。
react nativeのスタイリングはStyleSheetに記述し、CSSライクで制御します。Flexboxが肝となります。
最後に必要なコンポーネントをexportします。これで外からimportできるようになりました。

結果

f:id:twins_tech:20160526002637p:plain

駆け足でしたが、このような結果になりました。次回はroutingか、各中身を実装していこうと思います。