質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Q&A

0回答

264閲覧

ReactNativeで開発したアプリの、商品タグが時間が経過したら消えてしまった

t8opm1mu

総合スコア10

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

0グッド

0クリップ

投稿2020/02/20 02:11

ReactNative+Expoで開発したとある商品データベースアプリがあるのですが、そのアプリの商品につくタグが時間経過によって消えてしまいました。
バックアップでQRコードから確認しても、以前は表示されていたタグが、まったく同じソースでも今は表示されなくなっています。

おそらくコードに何らかのミスがあるものと思うのですが、もしよければ見てアドバイスをもらえませんでしょうか。

商品につくタグは「居抜き」と「スケルトン」です。

ReactNative

1import * as WebBrowser from 'expo-web-browser' 2import React, { useEffect, useState } from 'react' 3import { 4 Dimensions, 5 ScrollView, 6 StyleSheet, 7 View, 8 Text, 9 Image, 10 ActivityIndicator, 11 TouchableOpacity 12} from 'react-native' 13import HTML from 'react-native-render-html' 14import firebase from 'firebase' 15import 'firebase/firestore' 16import Constants from 'expo-constants' 17import Modal from 'react-native-modalbox' 18import { Button } from 'react-native-elements' 19import { Ionicons } from '@expo/vector-icons' 20import Carousel from "react-native-snap-carousel"; 21import ImageZoom from 'react-native-image-pan-zoom'; 22import { vw, vh, vmin, vmax } from 'react-native-expo-viewport-units'; 23import FooterMenuComponent from '../components/FooterMenuComponent'; 24 25const { extra } = Constants.manifest 26const { config = null } = extra || {} 27const { drupalUrl } = config 28 29export default function ArticleScreen({ navigation }) { 30 const { params: { article } } = navigation.state 31 const imageList = article.image_tag.split(",") 32 const user = firebase.auth().currentUser; 33 const [modal, setModal] = useState(user? user.emailVerified: false ) 34 const [option, setOption] = useState({ inuki: false, skelton: false, fromCreatedDate: 0, imageList: [] }) 35 const [onZoom, setOnZoom] = useState(false); 36 useEffect(() => { 37 ;(async () => { 38 const inuki = article.notice.includes('居抜き') 39 const skelton = article.notice.includes('スケルトン') 40 const fromCreatedDate = (new Date().getTime() - new Date(article.created_at).getTime())/(1000*60*60*24) 41 setOption({ inuki, skelton, fromCreatedDate, imageList }) 42 })() 43 }, []) 44 45 const defaultRenderer = (option: any) => { 46 return { 47 img: (htmlAttribs, children, convertedCSSStyles, passProps) => { 48 const src = htmlAttribs.srcset? htmlAttribs.srcset.split(",")[0].split(" ")[0] : htmlAttribs.src 49 if(src.includes('tag1') && !option.inuki) return 50 if(src.includes('tag2') && option.fromCreatedDate < 8) return 51 if(src.includes('tag3') && option.imageList.length < 3) return 52 if(src.includes('tag5') && !option.skelton) return 53 return <Image key={passProps.key} resizeMode={'stretch'} style={{ width: null, minWidth: vw(13), height: vw(5), marginRight: vw(3), backgroundColor: 'rgba(255,255,255, 1.0)' }} source={{ uri: `${drupalUrl}${src}` }}/> 54 }, 55 a: (htmlAttribs, children, convertedCSSStyles, passProps) => { 56 if (children[0]) { 57 const url = children[0][0].props.children[0].props.children 58 return <Button 59 titleProps={{allowFontScaling:false}} 60 allowFontScaling={false} 61 key={passProps.key} 62 title={'お問い合わせ'} 63 icon={{name: 'arrow-circle-o-right', type: 'font-awesome', iconStyle: { marginRight: vw(3), color: 'white' } }} 64 buttonStyle={{ backgroundColor:'#ff7335', borderRadius: 5, width: vw(60), marginBottom: vw(5), alignSelf: 'center' }} 65 onPress={() => WebBrowser.openBrowserAsync(url)} 66 /> 67 } 68 }, 69 } 70 } 71 72 const listsPrefixesRenderers = { 73 ul: (_htmlAttribs, _children, _convertedCSSStyles, passProps) => { 74 return <View style={{ padding: 0, margin: 0 }}/> 75 }, 76 } 77 78 return ( 79 <View style={styles.container}> 80 <ScrollView style={styles.contentContainer} scrollEnabled={user && user.emailVerified? true: false}> 81 {article.image_tag && 82 <View style={{ display: 'flex', alignItems: 'center' }}> 83 <Carousel 84 data={imageList} 85 renderItem={({ item, index }) => 86 <View style={{alignSelf: 'center'}}> 87 { 88 onZoom ? ( 89 <ImageZoom 90 cropWidth={Dimensions.get('window').width} 91 cropHeight={Dimensions.get('window').height} 92 imageWidth={Dimensions.get('window').width} 93 imageHeight={Dimensions.get("window").height * 0.4} 94 onClick={() => setOnZoom(false)} 95 > 96 <Image resizeMode='contain' source={{ uri: item }} style={{ width: Dimensions.get("window").width, height: Dimensions.get("window").height * 0.4, }} /> 97 </ImageZoom> 98 ) : ( 99 <TouchableOpacity 100 onPress={() => setOnZoom(true)} 101 > 102 <Image resizeMode='cover' source={{ uri: item }} style={{ width: Dimensions.get("window").width, height: Dimensions.get("window").height * 0.4, }} /> 103 </TouchableOpacity> 104 ) 105 } 106 </View> 107 } 108 itemWidth={Dimensions.get("window").width} 109 sliderWidth={Dimensions.get("window").width} 110 slideStyle={{ flex: 1 }} 111 /> 112 </View> 113 } 114 <TouchableOpacity onPress={() => setModal(false) } disabled={user && user.emailVerified} style={{ position: 'relative'}} > 115 <View style={{ flexDirection: 'row', alignSelf: 'flex-end', marginTop: vw(1)}}> 116 <Text allowFontScaling={false} style={{color: '#c8c8c8', fontSize: vw(2), marginRight: vw(4)}}>athome.co.jp</Text> 117 </View> 118 <View style={{ marginTop: vw(4), flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}> 119 <Text allowFontScaling={false} style={{ paddingLeft: vw(7), fontSize: vw(6)}}>{article.title}</Text> 120 </View> 121 {<View style={{ backgroundColor: 'white'}}> 122 <HTML 123 allowFontScaling={false} 124 tagsStyles={htmlTagStyle} 125 classesStyles={{ 126 sideline: { 127 borderRightWidth: 1, 128 borderRightColor: 'lightgrey', 129 borderLeftWidth: 1, 130 borderLeftColor: 'lightgrey' 131 }, 132 str: { 133 width: '100%', 134 lineHeight: vw(8), 135 color: '#EC673C', 136 fontSize: vw(6) 137 }, 138 waku: { 139 width: '100%', 140 marginBottom: vw(2), 141 paddingHorizontal: vw(3) 142 }, 143 border_1: { 144 borderTopWidth: 0, 145 }, 146 open_area: { 147 backgroundColor: 'rgba(255,255,255, 1.0)', 148 flexDirection: 'row', 149 alignItems: 'flex-start', 150 marginTop: vw(2) 151 }, 152 left: { 153 width: '70%', 154 borderTopWidth: 1, 155 borderColor: '#ccc', 156 borderStyle: 'solid', 157 color: 'black' 158 }, 159 }} 160 html={article.body} 161 ignoredStyles={['font-family', 'display']} 162 onLinkPress={(href, attribs)=>{ WebBrowser.openBrowserAsync(attribs) }} 163 listsPrefixesRenderers={listsPrefixesRenderers} 164 renderers={defaultRenderer(option)} 165 remoteLoadingView={<ActivityIndicator />} 166 /> 167 </View>} 168 <Modal 169 coverScreen={true} 170 style={styles.modalContainer} 171 isOpen={!modal} 172 onClosed={() => setModal(true)} 173 > 174 <View> 175 <Text allowFontScaling={false} style={{ alignSelf: 'center', fontSize: vw(5)}}>{'物件の詳細を見るためには'}</Text> 176 <View style={{ flexDirection: 'row', alignSelf: 'center'}}> 177 <Text allowFontScaling={false} style={{ fontSize: vw(5), color: 'orange'}}>{'アカウント登録'}</Text> 178 <Text allowFontScaling={false} style={{ fontSize: vw(5) }}>{'が必要です。'}</Text> 179 </View> 180 <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: vw(4)}}> 181 <Button 182 titleProps={{allowFontScaling:false}} 183 allowFontScaling={false} 184 title={'登録して物件詳細を見る'} 185 titleStyle={{ fontSize: vw(4) }} 186 buttonStyle={styles.accountButton} 187 onPress={() => { 188 navigation.navigate('Account', { accountIcon: true, article }) 189 setModal(true) 190 }} 191 /> 192 <Button 193 titleProps={{allowFontScaling:false}} 194 allowFontScaling={false} 195 title={'ログイン'} 196 titleStyle={{ fontSize: vw(4) }} 197 buttonStyle={styles.loginButton} 198 onPress={() => { 199 navigation.navigate('Login', { article }) 200 setModal(true) 201 }} 202 /> 203 </View> 204 </View> 205 </Modal> 206 </TouchableOpacity> 207 </ScrollView> 208 <View style={styles.footer}> 209 <FooterMenuComponent 210 navigation={navigation} 211 /> 212 </View> 213 </View> 214 ); 215} 216 217const htmlTagStyle = StyleSheet.create({ 218 219}) 220 221const styles = StyleSheet.create({ 222 223 224})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問