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

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

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

https://note.mu/cube0529/n/nd9f242d4d43b

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

Hello React Navigation

https://reactnavigation.org/docs/en/hello-react-navigation.html

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編~

https://memorandumrail.com/create-stack-navigator/

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

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

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

はい!

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

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

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

フォローよろしくお願いします!^_^

毎日つぶやいています!