У меня проблема, когда я использую ScrollViewComponent = {FlatList} в HeaderImageScrollView, {TriggeringView} из 'response-native-image-header-scroll-view' renderFixedForeground не появляется, если я не использую с flatlist оно работает. Somebo
Код с ScrollViewComponent = {FlatList}
<HeaderImageScrollView
maxHeight={MAX_HEIGHT}
minHeight={MIN_HEIGHT}
maxOverlayOpacity={0.6}
minOverlayOpacity={0.3}
fadeOutForeground
ScrollViewComponent={FlatList}
data={this.state.menus}
showsVerticalScrollIndicator={false}
renderItem={({item}) =>
<View>
<View style={{width:wp('100%'),backgroundColor:'#FF4B03',justifyContent:'center',alignItems:'center',marginTop:hp('6%'),height:hp('4%')}}>
<View style={{justifyContent:'center',alignItems:'center',width:wp('95%'),borderRadius:15,backgroundColor:'#FCFCFC', height:'100%'}}>
<Text style={{color:'black',fontSize:wp('6%'),fontFamily:'noto-sans'}}>{item.name}</Text>
</View>
</View>
<View style={styles.itemsContainer}>
<OptionsList
groups={item.groups}
itemsUniqueIDs={this.state.itemsUniqueIDs}
onChange={(selectedOptions) => this.setState({selectedOptions})}
selectedOptions={this.state.selectedOptions}
updateCart={this.props.updateCart}
level={1}
/>
</View>
</View>
}
keyExtractor={item => item.id.toString()}
renderHeader={() => <Image source={{uri:'https://images.pexels.com/photos/1267320/pexels-photo-1267320.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}} style={styles.image} />}
renderFixedForeground={() => (
<Animatable.View
style={styles.navTitleView}
ref={navTitleView => {
this.navTitleView = navTitleView;
}}
>
<View style={{width:'95%',flexDirection:'row',justifyContent:'space-between',alignItems:'center',marginTop:Platform.OS == 'ios' ? hp('3%') : 0}}>
<View style={{flexDirection:'row',justifyContent:'center',alignItems:"center"}}>
<RoundButton handlePress={this.testFunction.bind(this)} iconName={'arrowleft'}/>
<Text style={{fontSize:hp('2%'),color:'white',left:15}}>Piazzeta</Text>
</View>
<View>
<RoundButton handlePress={this.testFunction.bind(this)} iconName={'search1'}/>
</View>
</View>
</Animatable.View>
)}
renderForeground={() => (
<View style={{alignItems:'center'}}>
<View style={{flexDirection:'row',width:wp('90%'),justifyContent:'space-between',marginTop:Platform.OS == 'ios' ? hp('4%') : hp('1%')}}>
<View style={{width:'70%'}}>
<RoundButton handlePress={this.testFunction.bind(this)} iconName={'arrowleft'}/>
</View>
<View style={{flexDirection:'row',width:'30%',justifyContent:'space-between'}}>
<RoundButton handlePress={this.testFunction.bind(this)} iconName={'sharealt'}/>
<RoundButton handlePress={this.testFunction.bind(this)} iconName={'search1'}/>
</View>
</View>
<View style={{width:wp('100%'),alignItems:'center',marginTop:hp('4%')}}>
<Text style={{fontSize:hp('5%'),color:'white'}}>Piazzeta</Text>
</View>
</View>
)}
>
<TriggeringView
onHide={() => this.navTitleView.fadeInUp(200)}
onDisplay={() => this.navTitleView.fadeOut(100)}>
</TriggeringView>
</HeaderImageScrollView>
Фото1
Фото2
Код без FlatList, где это работает:
<HeaderImageScrollView maxHeight={MAX_HEIGHT} minHeight={MIN_HEIGHT} maxOverlayOpacity={0.6} minOverlayOpacity={0.3} fadeOutForeground
renderHeader={() => <Image source={{uri:option.image === null ? 'https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg' : option.image}} style={styles.image} />}
renderFixedForeground={() => (
<Animatable.View
style={styles.navTitleView}
ref={navTitleView => { this.navTitleView = navTitleView;}}
>
<View style={{width:'95%',flexDirection:'row',alignItems:'center',marginTop:Platform.OS == 'ios' ? hp('3%') : 0}}>
<RoundButton handlePress={()=>{setModalVisible(itemsUniqueIDs[option.name],false,"item")}} iconName={'arrowleft'}/>
<Text style={{fontSize:hp('2%'),color:'white',left:15}}>{option.name}</Text>
<Text style={{fontSize:hp('2%'),left:wp('6%'),color:'#fd2e00'}}>{option.price === 0 ? 0 : option.price/100}£</Text>
</View>
</Animatable.View>
)}
renderForeground={() => (
<View style={{alignItems:'center'}}>
<View style={{flexDirection:'row',width:wp('90%'),justifyContent:'space-between',marginTop:Platform.OS == 'ios' ? hp('4%') : hp('1%')}}>
<RoundButton handlePress={()=>{setModalVisible(itemsUniqueIDs[option.name],false,"item")}} iconName={'arrowleft'}/>
</View>
</View>
)}
>
<TriggeringView onHide={() => this.navTitleView.fadeInUp(200)} onDisplay={() => this.navTitleView.fadeOut(100)}>
</TriggeringView>
<StatusBar barStyle="light-content"/>
<View style={styles.subOptionNameContainer}>
<Text style={styles.subOptionNameText}>{option.name}</Text>
<Text style={{fontSize:wp('6%'),fontWeight:"bold",left:wp('5%'),color:'#fd2e00'}}>{option.price === 0 ? 0 : option.price/100}£</Text>
</View>
<View style={styles.cookingContainer}>
<Text numberOfLines={1} style={{fontSize:wp('4%'),fontWeight:"bold",left:wp('2%')}}>Descriere</Text>
<Text numberOfLines={3} style={{left:wp('2%'),paddingTop:10,paddingRight:wp('2%'),paddingBottom:10}}>{option.description === null ? "Fara descriere" : option.description}</Text>
</View>
<View style={styles.cookingContainer}>
<Text style={{fontSize:wp('4%'),fontWeight:"bold",left:wp('2%')}}>minQuantityGroup {option.minQuantityGroup}</Text>
<Text style={{fontSize:wp('4%'),fontWeight:"bold",left:wp('2%')}}>maxQuantityGroup {option.maxQuantityGroup}</Text>
{
selectedOptions[itemsUniqueIDs[option.name]] === undefined ? <View></View> :
<Text style={{fontSize:wp('4%'),fontWeight:"bold",left:wp('2%')}}>currentQuantity {selectedOptions[itemsUniqueIDs[option.name]]["quantityGroup"]}</Text>
}
</View>
{this.renderCookingInstructions(option.cookingInstructionsItem,'product',option.enforceInstructionsItem,itemsUniqueIDs[option.name])}
{this.renderCookingInstructions(option.cookingInstructionsMenuGroup,'group',option.enforceInstructionMenuGroup,itemsUniqueIDs[option.name])}
<View style={styles.cookingContainer}>
<Text style={{fontWeight:"bold",fontSize:wp('4%'),padding:10,paddingLeft:wp('2%')}}>Alte instructiuni de gatire</Text>
<TextInput
style={{backgroundColor:'transparent',width:wp('95%'),left:wp('2%')}}
placeholder={'Adauga instructiuni...'}
onChangeText={(text)=>{selectedOptions[itemsUniqueIDs[option.name]].customInstructions = text}}
/>
</View>
{
(option.subOptions.length > 0 && selectedOptions[itemsUniqueIDs[option.name]]) &&
<OptionsList
groups={option.subOptions}
itemsUniqueIDs={itemsUniqueIDs}
selectedOptions={selectedOptions[itemsUniqueIDs[option.name]]}
onChange={(subSelections) => handleSubOptionsListChange(itemsUniqueIDs[option.name], subSelections)}
level={level+1}
/>
}
{
renderNumericInput(option.numeric,itemsUniqueIDs[option.name],group.menuGroupName)
}
</HeaderImageScrollView>
фото1
фото2