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})
あなたの回答
tips
プレビュー