Day42 React Native +ボタンをクリックしたら登録画面が表示されるようにする

今日は+ボタンをクリックしたら登録画面が表示されるようにします。登録画面の中身はさておき、登録画面に行って、戻るボタンで戻れるようにします。

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】|川西発之 / 陳発暉|note ※※※※※本記事は2018年5月に執筆されました.当時の React Native の環境から変わっている部分もありますので,2020年5月より記事の値段を大幅値下げすると同時に,記事更新や質問等のサポートの対象外とさせて頂きます.m(_ _ )m1/3 【ウェルカム画面編】:799円 → 199円2/3 【ホームタブ編】:899円 → 299円3/3 【プラスボタン編】:999円 → 399円※※※※※
 note.mu

いつもの note を参考に考えると、createStackNavigator と createAppContainer を使っていました。基本を抑えたいので、こちらを見ながら、なんとなく組みます。

Hello React Navigation

Hello React Navigation · React Navigation In a web browser, you can link to different pages using an anchor (`<a>`) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn't have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story.
 reactnavigation.org
import React from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import { createAppContainer } from "react-navigation";

import Reminders from './screens/RemindersScreen';

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const AppContainer = createAppContainer(AppNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    ScrollView,
    Dimensions
} from 'react-native';
import { ListItem } from 'react-native-elements';
import { createStackNavigator, createAppContainer } from "react-navigation";

const SCREEN_WIDTH = Dimensions.get('window').width;
const allRemindersTmp = [
    { title: '起床', setTime: '7:00', },
    { title: '会社に行く', setTime: '8:00', },
    { title: '日報提出', setTime: '17:00', },
];

class RemindersScreen extends Component {
    renderReminders() {
        let reminders = allRemindersTmp;

        return (
            <ScrollView>
                {reminders.map((remind, index) => {
                    return (
                        <ListItem
                            key={index}
                            title={remind.title}
                            subtitle={`${remind.setTime}`}
                            style={{ width: SCREEN_WIDTH }}
                        />
                    );
                })}
            </ScrollView>
        );
    }
    
    render() {
        return (
            <View style={{ flex: 1, marginTop: 50 }}>
                {this.renderReminders()}
            </View>
        );
    }
}

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

const AppNavigator = createStackNavigator({
    Reminders: {
        screen: RemindersScreen
    }
});
  
export default createAppContainer(AppNavigator);

ちょっと他のサイトだとあまりにも screen に 〜Screen.js と命名しているので、Reminders.js から RemindersScreen.js に変更しました。

まだ component の使い方とかイマイチですが、この状態で Simulator を実行します。

エラーです。

Unable to resolve “react-navigation” from “App.js”Failed building JavaScript bundle.

react-navigation が 解決できないそうです。

VSCode 見てみると見つけられるところにはありそうですが、ちょっと考えて、note を振り返ってもう一度 install してみます。

$ npm install react-navigation
$ npm install

Simulator を再起動します。

あれ?またなんか違う。
どこかが根本的に間違っているっぽい。

note のアプリの構成は、タブの中に3機能がスタックされる方式だったけど、今回は1機能しかないからタブはいらないので、外出ししたい。

うーんちょっと悩みながらソースコードを修正していきます。
なんか App の宣言も微妙に毎回変わってしまうのはなんでなんだ。

やり直すために、

$ git checkout .

そういえばさっきファイル名変えたんだった!
そこだけもう一度適用して、git commit しておこう。

もう一度 createStackNavigation を復習。

React Navigationの使い方~createStackNavigator編~

React Navigationの使い方~createStackNavigator編~ | memorandumrail react nativeでページネーションを実装するライブラリはいくつか存在しますが、公式が推奨しているreact-navigationを使うのが良いでしょう。しかし、いろんな記事を見ているとほとんどバージョンが1のものを紹介しているので、バージョン2の紹介をしていきます。今回作るものは下記のようなものになります。react-navigationでページネーションを実装するでは、実際にreact-navigationでアプリを作成するところから始めます。まずは、create-react-native-appでアプリを作成し、react-navigationをインストールしましょう。create
 memorandumrail.com

react nativeでページネーションを実装するライブラリはいくつか存在しますが、公式が推奨しているreact-navigationを使うのが良いでしょう。

なんと!公式のページの見てるところが違った…
うう。再チェック。

react-navigationをインストールしましょう。

はい!

$ npm install –save react-navigation 
$ npm install
$ expo start

あら、まだなにも変更していない状態なのに、エラーが…

ボタンどころか宣言だけで終わってしまった。
また明日ノシ