reactjs - 滚动视图中的图像背景不起作用 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>
我在屏幕下方设计,但滚动视图反弹并出现在同一位置......我认为这是因为子位置样式,但它是行中的圆圈所必需的。我无法滚动以下圆圈,这是问题所在。
解决方案
您可以使用普通 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>
推荐阅读
- angular5 - Angular 5 中的 Bing 地图集成
- statusbar - 在 Glade3 中添加 Gtkstatusbar
- python - Jupyter notebook - 无法从其他文件夹导入 python 函数
- alexa - 自定义 Web 应用程序中的 Alexa
- javascript - Express.js : 获取同源 iframe 的 req.body.datas
- python - 无法使用 python 和 selenium 在网站中上传文件
- eclipse - Eclipse Che 的 Eclipse BPMN 2.0 建模器插件
- javascript - 通过for循环增加数组只保留最后一个对象?
- javascript - 如何通过 JavaScript UMD 加载 React 组件?
- android - 布局权重不起作用