chore: change directory names to plural
This commit is contained in:
Juchan Roh
parent
bfb93bc0a1
commit
dccba6eec2
@ -18,16 +18,20 @@ import {
|
||||
import update from 'react-addons-update';
|
||||
import Icon from 'react-native-vector-icons/MaterialIcons';
|
||||
import ImagePicker from 'react-native-image-crop-picker';
|
||||
import CardConv from '../module/CardConv';
|
||||
import CardConv from '../modules/CardConv';
|
||||
import i18n from 'i18n-js';
|
||||
|
||||
class CardPreview extends React.Component {
|
||||
render() {
|
||||
let cardContent = (
|
||||
<View
|
||||
style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 8}}>
|
||||
<View style={{flex: 1}}>
|
||||
<TouchableOpacity style={{flex: 1}}>
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||
borderRadius: 8,
|
||||
}}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<TouchableOpacity style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@ -39,7 +43,7 @@ class CardPreview extends React.Component {
|
||||
}}>
|
||||
{this.props.name}
|
||||
</Text>
|
||||
<View style={{flex: 1, justifyContent: 'center', paddingTop: 20}}>
|
||||
<View style={{ flex: 1, justifyContent: 'center', paddingTop: 20 }}>
|
||||
<Text
|
||||
style={{
|
||||
paddingTop: 0,
|
||||
@ -73,26 +77,26 @@ class CardPreview extends React.Component {
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={{height: 1, backgroundColor: '#FAFAFA'}} />
|
||||
<View style={{height: 48, flexDirection: 'row'}}>
|
||||
<View style={{ height: 1, backgroundColor: '#FAFAFA' }} />
|
||||
<View style={{ height: 48, flexDirection: 'row' }}>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<Text style={{fontSize: 14, color: '#FAFAFA'}}>
|
||||
<Text style={{ fontSize: 14, color: '#FAFAFA' }}>
|
||||
{i18n.t('card_edit')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={{width: 1, backgroundColor: '#FAFAFA'}} />
|
||||
<View style={{ width: 1, backgroundColor: '#FAFAFA' }} />
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<Text style={{fontSize: 14, color: '#ffffff'}}>
|
||||
<Text style={{ fontSize: 14, color: '#ffffff' }}>
|
||||
{i18n.t('card_delete')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
@ -111,7 +115,7 @@ class CardPreview extends React.Component {
|
||||
]}>
|
||||
{this.props.image ? (
|
||||
<ImageBackground
|
||||
source={{uri: this.props.image}}
|
||||
source={{ uri: this.props.image }}
|
||||
style={{
|
||||
flex: 1,
|
||||
resizeMode: 'contain',
|
||||
@ -144,14 +148,14 @@ class ETextInput extends React.Component {
|
||||
};
|
||||
|
||||
onFocusCallback() {
|
||||
this.setState({focused: true});
|
||||
this.setState({ focused: true });
|
||||
if (typeof this.props.onFocus === 'function') {
|
||||
this.props.onFocus();
|
||||
}
|
||||
}
|
||||
|
||||
onBlurCallback() {
|
||||
this.setState({focused: false});
|
||||
this.setState({ focused: false });
|
||||
if (typeof this.props.onBlur === 'function') {
|
||||
this.props.onBlur();
|
||||
}
|
||||
@ -190,7 +194,7 @@ class ETextInput extends React.Component {
|
||||
</Text>
|
||||
|
||||
<TextInput
|
||||
style={[{fontSize: 17, paddingTop: 4}, this.props.textStyle]}
|
||||
style={[{ fontSize: 17, paddingTop: 4 }, this.props.textStyle]}
|
||||
value={this.props.value}
|
||||
onFocus={() => this.onFocusCallback()}
|
||||
onBlur={() => this.onBlurCallback()}
|
||||
@ -237,7 +241,7 @@ class CardEditScreen extends React.Component {
|
||||
};
|
||||
|
||||
componentDidMount(): void {
|
||||
let {height, width} = Dimensions.get('window');
|
||||
let { height, width } = Dimensions.get('window');
|
||||
|
||||
function randomHex4Byte() {
|
||||
let hexString = Math.min(
|
||||
@ -297,7 +301,7 @@ class CardEditScreen extends React.Component {
|
||||
async updateSID() {
|
||||
if (this.makeSid() !== '') {
|
||||
let uid = await CardConv.convertSID(this.makeSid());
|
||||
this.setState({uid: uid});
|
||||
this.setState({ uid: uid });
|
||||
}
|
||||
}
|
||||
|
||||
@ -305,7 +309,7 @@ class CardEditScreen extends React.Component {
|
||||
let sid = this.makeSid();
|
||||
|
||||
if (sid === '') {
|
||||
this.setState({sidError: true});
|
||||
this.setState({ sidError: true });
|
||||
return;
|
||||
}
|
||||
|
||||
@ -335,7 +339,11 @@ class CardEditScreen extends React.Component {
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{sid2: randomHex4Byte(), sid3: randomHex4Byte(), sid4: randomHex4Byte()},
|
||||
{
|
||||
sid2: randomHex4Byte(),
|
||||
sid3: randomHex4Byte(),
|
||||
sid4: randomHex4Byte(),
|
||||
},
|
||||
() => this.updateSID(),
|
||||
);
|
||||
}
|
||||
@ -348,20 +356,20 @@ class CardEditScreen extends React.Component {
|
||||
mediaType: 'photo',
|
||||
}).then(res => {
|
||||
if (res && res.path) {
|
||||
this.setState({image: res.path});
|
||||
this.setState({ image: res.path });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={{flex: 1, paddingTop: StatusBar.currentHeight}}>
|
||||
<SafeAreaView style={{ flex: 1, paddingTop: StatusBar.currentHeight }}>
|
||||
<StatusBar
|
||||
barStyle="dark-content"
|
||||
translucent={true}
|
||||
backgroundColor={'#ffffff'}
|
||||
/>
|
||||
<KeyboardAvoidingView style={{flex: 1}}>
|
||||
<KeyboardAvoidingView style={{ flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
height: 48,
|
||||
@ -371,7 +379,11 @@ class CardEditScreen extends React.Component {
|
||||
backgroundColor: '#ffffff',
|
||||
}}>
|
||||
<View
|
||||
style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 17,
|
||||
@ -397,16 +409,17 @@ class CardEditScreen extends React.Component {
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<ScrollView style={{flex: 1, paddingHorizontal: 24, paddingTop: 16}}>
|
||||
<ScrollView
|
||||
style={{ flex: 1, paddingHorizontal: 24, paddingTop: 16 }}>
|
||||
<ETextInput
|
||||
title={i18n.t('edit_name')}
|
||||
value={this.state.name}
|
||||
onChangeText={text => this.setState({name: text})}
|
||||
onChangeText={text => this.setState({ name: text })}
|
||||
ref={ref => (this.nameInput = ref)}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => this.selectPhoto()}>
|
||||
<ETextInput
|
||||
style={{marginTop: 24}}
|
||||
style={{ marginTop: 24 }}
|
||||
title={i18n.t('edit_background')}
|
||||
value={
|
||||
this.state.image
|
||||
@ -417,18 +430,18 @@ class CardEditScreen extends React.Component {
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={{marginTop: 24, flexDirection: 'row'}}>
|
||||
<View style={{ marginTop: 24, flexDirection: 'row' }}>
|
||||
<ETextInput
|
||||
title={'SID'}
|
||||
value={'02FE'}
|
||||
onChangeText={text => this.setState({sid: text})}
|
||||
style={{flex: 1}}
|
||||
onChangeText={text => this.setState({ sid: text })}
|
||||
style={{ flex: 1 }}
|
||||
editable={false}
|
||||
error={this.state.sidError}
|
||||
textStyle={{textAlign: 'center'}}
|
||||
textStyle={{ textAlign: 'center' }}
|
||||
titleStyle={
|
||||
this.state.sidError !== true &&
|
||||
this.state.sidFocus && {color: '#03A9F4'}
|
||||
this.state.sidFocus && { color: '#03A9F4' }
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
@ -443,19 +456,19 @@ class CardEditScreen extends React.Component {
|
||||
-
|
||||
</Text>
|
||||
<ETextInput
|
||||
textStyle={{textAlign: 'center'}}
|
||||
textStyle={{ textAlign: 'center' }}
|
||||
value={this.state.sid2}
|
||||
onChangeText={text => {
|
||||
this.setState({sid2: text}, () => this.updateSID());
|
||||
this.setState({ sid2: text }, () => this.updateSID());
|
||||
if (text.length === 4) {
|
||||
this.sid3Input.focus();
|
||||
}
|
||||
}}
|
||||
style={{flex: 1}}
|
||||
style={{ flex: 1 }}
|
||||
maxLength={4}
|
||||
error={this.state.sidError}
|
||||
onFocus={() => this.setState({sidFocus: true})}
|
||||
onBlur={() => this.setState({sidFocus: false})}
|
||||
onFocus={() => this.setState({ sidFocus: true })}
|
||||
onBlur={() => this.setState({ sidFocus: false })}
|
||||
autoCapitalize={'characters'}
|
||||
ref={ref => (this.sid2Input = ref)}
|
||||
editable={false}
|
||||
@ -472,19 +485,19 @@ class CardEditScreen extends React.Component {
|
||||
-
|
||||
</Text>
|
||||
<ETextInput
|
||||
textStyle={{textAlign: 'center'}}
|
||||
textStyle={{ textAlign: 'center' }}
|
||||
value={this.state.sid3}
|
||||
onChangeText={text => {
|
||||
this.setState({sid3: text}, () => this.updateSID());
|
||||
this.setState({ sid3: text }, () => this.updateSID());
|
||||
if (text.length === 4) {
|
||||
this.sid4Input.focus();
|
||||
}
|
||||
}}
|
||||
style={{flex: 1}}
|
||||
style={{ flex: 1 }}
|
||||
maxLength={4}
|
||||
error={this.state.sidError}
|
||||
onFocus={() => this.setState({sidFocus: true})}
|
||||
onBlur={() => this.setState({sidFocus: false})}
|
||||
onFocus={() => this.setState({ sidFocus: true })}
|
||||
onBlur={() => this.setState({ sidFocus: false })}
|
||||
autoCapitalize={'characters'}
|
||||
ref={ref => (this.sid3Input = ref)}
|
||||
editable={false}
|
||||
@ -501,17 +514,17 @@ class CardEditScreen extends React.Component {
|
||||
-
|
||||
</Text>
|
||||
<ETextInput
|
||||
textStyle={{textAlign: 'center'}}
|
||||
textStyle={{ textAlign: 'center' }}
|
||||
value={this.state.sid4}
|
||||
onChangeText={text => {
|
||||
this.setState({sid4: text}, () => this.updateSID());
|
||||
this.setState({ sid4: text }, () => this.updateSID());
|
||||
this.updateSID();
|
||||
}}
|
||||
style={{flex: 1}}
|
||||
style={{ flex: 1 }}
|
||||
error={this.state.sidError}
|
||||
maxLength={4}
|
||||
onFocus={() => this.setState({sidFocus: true})}
|
||||
onBlur={() => this.setState({sidFocus: false})}
|
||||
onFocus={() => this.setState({ sidFocus: true })}
|
||||
onBlur={() => this.setState({ sidFocus: false })}
|
||||
autoCapitalize={'characters'}
|
||||
ref={ref => (this.sid4Input = ref)}
|
||||
editable={false}
|
||||
@ -536,7 +549,8 @@ class CardEditScreen extends React.Component {
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onPress={() => this.setRandomSid()}>
|
||||
<Text style={{fontSize: 17, color: '#ffffff', fontWeight: '500'}}>
|
||||
<Text
|
||||
style={{ fontSize: 17, color: '#ffffff', fontWeight: '500' }}>
|
||||
{i18n.t('edit_random')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
@ -557,7 +571,7 @@ class CardEditScreen extends React.Component {
|
||||
cardHeight={this.state.cardHeight ?? 0}
|
||||
/>
|
||||
|
||||
<View style={{height: 50}} />
|
||||
<View style={{ height: 50 }} />
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</SafeAreaView>
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StatusBar,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Dimensions,
|
||||
@ -12,155 +11,22 @@ import {
|
||||
Alert,
|
||||
StyleSheet,
|
||||
Image,
|
||||
FlatList,
|
||||
} from 'react-native';
|
||||
import update from 'react-addons-update';
|
||||
import Hcef from '../module/Hcef';
|
||||
import CardConv from '../module/CardConv';
|
||||
import Hcef from '../modules/Hcef';
|
||||
import CardConv from '../modules/CardConv';
|
||||
import AsyncStorage from '@react-native-community/async-storage';
|
||||
import Icon from 'react-native-vector-icons/MaterialIcons';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import i18n from 'i18n-js';
|
||||
|
||||
import CardView from '../components/Card';
|
||||
import { Card } from '../types';
|
||||
|
||||
const RNFS = require('react-native-fs');
|
||||
|
||||
class Card extends React.Component {
|
||||
async onPress() {
|
||||
this.props.onPress(this.props.card, this.props.index);
|
||||
}
|
||||
|
||||
async disable() {
|
||||
if (typeof this.props.disableCallback === 'function') {
|
||||
this.props.disableCallback(this.props.card, this.props.index);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let cardContent = (
|
||||
<View
|
||||
style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 8}}>
|
||||
<View style={{flex: 1}}>
|
||||
<TouchableOpacity style={{flex: 1}} onPress={this.onPress.bind(this)}>
|
||||
<Text
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 20,
|
||||
left: 20,
|
||||
fontSize: 17,
|
||||
fontWeight: 'bold',
|
||||
color: '#ffffff',
|
||||
}}>
|
||||
{this.props.card.name}
|
||||
</Text>
|
||||
|
||||
<View style={{flex: 1, justifyContent: 'center', paddingTop: 20}}>
|
||||
<Text
|
||||
style={{
|
||||
paddingTop: 0,
|
||||
textAlign: 'center',
|
||||
alignSelf: 'center',
|
||||
color: '#E0E0E0',
|
||||
fontSize: 14,
|
||||
}}>
|
||||
{this.props.card.uid.substr(0, 4) +
|
||||
'-' +
|
||||
this.props.card.uid.substr(4, 4) +
|
||||
'-' +
|
||||
this.props.card.uid.substr(8, 4) +
|
||||
'-' +
|
||||
this.props.card.uid.substr(12, 4)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
paddingTop: 8,
|
||||
textAlign: 'center',
|
||||
alignSelf: 'center',
|
||||
fontSize: 24,
|
||||
color: '#FAFAFA',
|
||||
fontWeight: '500',
|
||||
letterSpacing: -0.5,
|
||||
}}>
|
||||
{this.props.card.enabled
|
||||
? i18n.t('card_touch_to_disable')
|
||||
: i18n.t('card_touch_to_enable')}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={{height: 1, backgroundColor: '#FAFAFA'}} />
|
||||
<View style={{height: 48, flexDirection: 'row'}}>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onPress={() =>
|
||||
this.props.navigation.navigate('CardEditScreen', {
|
||||
name: this.props.card.name,
|
||||
sid: this.props.card.sid,
|
||||
image: this.props.card.image,
|
||||
index: this.props.index,
|
||||
update: this.props.update,
|
||||
})
|
||||
}>
|
||||
<Text style={{fontSize: 14, color: '#FAFAFA'}}>
|
||||
{i18n.t('card_edit')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={{width: 1, backgroundColor: '#FAFAFA'}} />
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onPress={() => this.props.delete(this.props.index)}>
|
||||
<Text style={{fontSize: 14, color: '#ffffff'}}>
|
||||
{i18n.t('card_delete')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
borderRadius: 8,
|
||||
height: this.props.cardHeight,
|
||||
marginTop: 24,
|
||||
marginHorizontal: 24,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
]}>
|
||||
{this.props.card.image ? (
|
||||
<ImageBackground
|
||||
source={{uri: this.props.card.image}}
|
||||
style={{
|
||||
flex: 1,
|
||||
resizeMode: 'contain',
|
||||
}}
|
||||
blurRadius={2}
|
||||
borderRadius={8}>
|
||||
{cardContent}
|
||||
</ImageBackground>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
resizeMode: 'contain',
|
||||
backgroundColor: '#03A9F4',
|
||||
}}
|
||||
blurRadius={2}
|
||||
borderRadius={8}>
|
||||
{cardContent}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
class MainScreen extends React.Component {
|
||||
state = {
|
||||
cards: [],
|
||||
@ -170,7 +36,7 @@ class MainScreen extends React.Component {
|
||||
|
||||
async loadCards() {
|
||||
let cardsJson = await AsyncStorage.getItem('cards');
|
||||
this.setState({cards: cardsJson ? JSON.parse(cardsJson) : []});
|
||||
this.setState({ cards: cardsJson ? JSON.parse(cardsJson) : [] });
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -182,11 +48,11 @@ class MainScreen extends React.Component {
|
||||
Alert.alert(
|
||||
i18n.t('alert_not_support_title'),
|
||||
i18n.t('alert_not_support_content'),
|
||||
[{text: i18n.t('alert_not_support_yes')}],
|
||||
[{ text: i18n.t('alert_not_support_yes') }],
|
||||
);
|
||||
} else if (Hcef.enabled !== true) {
|
||||
Alert.alert(i18n.t('alert_nfc_title'), i18n.t('alert_nfc_content'), [
|
||||
{text: i18n.t('alert_nfc_yes')},
|
||||
{ text: i18n.t('alert_nfc_yes') },
|
||||
]);
|
||||
}
|
||||
|
||||
@ -194,7 +60,7 @@ class MainScreen extends React.Component {
|
||||
Hcef.disableService(); // 카드를 활성화하지 않았는데도 카드가 에뮬되는 이슈 방지
|
||||
}
|
||||
|
||||
let {height, width} = Dimensions.get('window');
|
||||
let { height, width } = Dimensions.get('window');
|
||||
|
||||
this.setState({
|
||||
cardHeight: ((width - 48) * 53.98) / 85.6,
|
||||
@ -231,7 +97,9 @@ class MainScreen extends React.Component {
|
||||
this.prevCard.enabled = true;
|
||||
this.prevIndex = index;
|
||||
this.setState({
|
||||
cards: update(this.state.cards, {[index]: {enabled: {$set: true}}}),
|
||||
cards: update(this.state.cards, {
|
||||
[index]: { enabled: { $set: true } },
|
||||
}),
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -242,7 +110,9 @@ class MainScreen extends React.Component {
|
||||
if (ret) {
|
||||
card.enabled = false;
|
||||
this.setState({
|
||||
cards: update(this.state.cards, {[index]: {enabled: {$set: false}}}),
|
||||
cards: update(this.state.cards, {
|
||||
[index]: { enabled: { $set: false } },
|
||||
}),
|
||||
});
|
||||
return true;
|
||||
}
|
||||
@ -270,7 +140,7 @@ class MainScreen extends React.Component {
|
||||
this.setState(
|
||||
{
|
||||
cards: update(this.state.cards, {
|
||||
$push: [{name: name, sid: sid, uid: uid, image: internalPath}],
|
||||
$push: [{ name: name, sid: sid, uid: uid, image: internalPath }],
|
||||
}),
|
||||
},
|
||||
async () => {
|
||||
@ -282,10 +152,10 @@ class MainScreen extends React.Component {
|
||||
{
|
||||
cards: update(this.state.cards, {
|
||||
[index]: {
|
||||
name: {$set: name},
|
||||
sid: {$set: sid},
|
||||
uid: {$set: uid},
|
||||
image: {$set: internalPath},
|
||||
name: { $set: name },
|
||||
sid: { $set: sid },
|
||||
uid: { $set: uid },
|
||||
image: { $set: internalPath },
|
||||
},
|
||||
}),
|
||||
},
|
||||
@ -307,7 +177,7 @@ class MainScreen extends React.Component {
|
||||
|
||||
cardListDelete(index) {
|
||||
Alert.alert(i18n.t('alert_delete_title'), i18n.t('alert_delete_content'), [
|
||||
{text: i18n.t('alert_delete_no')},
|
||||
{ text: i18n.t('alert_delete_no') },
|
||||
{
|
||||
text: i18n.t('alert_delete_yes'),
|
||||
onPress: () => {
|
||||
@ -353,7 +223,7 @@ class MainScreen extends React.Component {
|
||||
});
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{flex: 1, paddingTop: StatusBar.currentHeight}}>
|
||||
<SafeAreaView style={{ flex: 1, paddingTop: StatusBar.currentHeight }}>
|
||||
<StatusBar
|
||||
barStyle="dark-content"
|
||||
translucent={true}
|
||||
@ -368,7 +238,7 @@ class MainScreen extends React.Component {
|
||||
backgroundColor: '#ffffff',
|
||||
}}>
|
||||
<View
|
||||
style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
|
||||
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 17,
|
||||
@ -399,11 +269,11 @@ class MainScreen extends React.Component {
|
||||
</View>
|
||||
|
||||
{this.state.cards && this.state.cards.length > 0 ? (
|
||||
<ScrollView style={{flex: 1}}>{cardWidget}</ScrollView>
|
||||
<ScrollView style={{ flex: 1 }}>{cardWidget}</ScrollView>
|
||||
) : (
|
||||
<View
|
||||
style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
||||
<Text style={{fontSize: 17, color: '#9E9E9E'}}>
|
||||
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Text style={{ fontSize: 17, color: '#9E9E9E' }}>
|
||||
{i18n.t('main_empty_string')}
|
||||
</Text>
|
||||
</View>
|
||||
@ -412,5 +282,51 @@ class MainScreen extends React.Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
const ListSeparator = () => <View style={styles.separator} />;
|
||||
|
||||
const MainScreen = () => {
|
||||
const [cards, setCards] = useState<Card[]>([
|
||||
{
|
||||
sid: '02FE000000000000',
|
||||
name: 'e-amusement pass',
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar backgroundColor={'white'} barStyle={'dark-content'} />
|
||||
|
||||
{cards.length > 0 ? (
|
||||
<FlatList
|
||||
style={styles.list}
|
||||
data={cards}
|
||||
renderItem={card => <CardView card={card.item} />}
|
||||
ItemSeparatorComponent={ListSeparator}
|
||||
ListHeaderComponent={View}
|
||||
ListHeaderComponentStyle={styles.separator}
|
||||
ListFooterComponent={View}
|
||||
ListFooterComponentStyle={styles.separator}
|
||||
/>
|
||||
) : (
|
||||
<View />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f0f0f0',
|
||||
},
|
||||
list: {
|
||||
// paddingHorizontal: 16,
|
||||
},
|
||||
separator: {
|
||||
height: 16,
|
||||
},
|
||||
});
|
||||
|
||||
export default MainScreen;
|
||||
Loading…
Reference in New Issue
Block a user