Day41 React Native 配置を整えよう

Day39 の続きから
現在の画面はこちらです。

真ん中によっちゃってます

全部のデータが真ん中に寄ってしまいました。

この現象はこちらですでに解説されていましたね!

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 1/3 【ウェルカム画面編】https://note.mu/cube0529/n/n4a130029dfe1

って、あれ……

これは配列の各要素`slide`(map関数からの入力)の幅が適切でないからです。現状幅は何も指定されていないので、Textタグの内容が全部入るだけの幅しかありません。

ということで、Dimensions を設定します。

真ん中だけだったのが、なおりました!

import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    ScrollView,
    Dimensions
} from 'react-native';
import { ListItem } from 'react-native-elements';

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

class Reminders 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',
    },
});
  
export default Reminders;

はい、今日はここまで!

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

毎日つぶやいています!