[英]Image background in scroll view not working React Native
我是React Native的新手,我必須設計一個屏幕,當列表變長時,我意識到我的滾動視圖在此處不起作用,位於我的代碼下方,請分享建議...謝謝!
<View style={{flex:1}}>
<ActionBar
containerStyle={{height:60,alignItems: 'center'}}
backgroundColor={'#fff'}
title={'Select Categories'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{backgroundColor:'#333',height:18,width:18}}
/>
<Image source={require('../images/bg-login.jpg')}
style={{position:'absolute',left:0,right:0,top:0,bottom:0}} />
<ScrollView style={{backgroundColor:'#00000000',position:'absolute',left:0,right:0,top:0,bottom:0}} >
{views}
</ScrollView>
<View style={styles.footerSec}>
<TouchableOpacity style={styles.nextBtn}
onPress={()=> {this.props.navigation.navigate('Tutorials',{tutId:this.state.selectedCats})}}>
<Text style={[styles.btnText, styles.priceText]}>Next</Text>
</TouchableOpacity>
</View>
</View>
這是我的清單代碼:
<TouchableOpacity key={itemData[j]._id}
onPress = {() => {
activeItem ? this.removeCat(itemData[j]._id) : this.insertCat(itemData[j]._id)
}}>
<View style={{position:'relative'}}>
<LinearGradient colors={activeItem ? ['#cb5fb1', '#f874d8', '#f98bde'] :['#ffb6cf','#ffb6cf','#ffb6cf'] } style={{
position: 'absolute',
alignItems: 'center',
justifyContent:'center',
backgroundColor: '#f673d7',
width: armSize,
height: armSize,
borderRadius: (armSize) / 2,
top: topp,
left: leftp,
}}>
<Text style={{
color: '#fff',
alignSelf:'center',
fontSize: RandomNumber,
fontWeight: '600',
}}>
{itemData[j].name}
</Text>
</LinearGradient>
</View>
</TouchableOpacity>
我在屏幕下方進行了設計,但滾動視圖反彈並上升到了相同的位置...我認為這是由於子位置樣式所致,但行中的圓是必需的。 我無法滾動到下面的圓圈,這就是問題所在。
您可以使用normal Image通過position ='absolute'放置背景圖像,並將ScrollView的背景色不透明度設置為#00000000 ,這意味着它將是透明的
例
<Image
source={require('../images/bg-login.jpg')}
style={{position:'absolute',
left:0,
right:0,
top:0,
bottom:0}} />
<ScrollView
style={{backgroundColor:'#00000000',
position:'absolute',
left:0,
right:0,
top:0,
bottom:0}} >
<View>
<Text>Some content</Text>
</View>
</ScrollView>
對於我在下面的代碼中使用的滾動視圖問題,它在任何地方都可以正常工作
<ScrollView contentContainerStyle={{ paddingBottom: 120 }}>
---code---
</ScrollView>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.