我构建了react原生应用程序,并使用scrollView作为标题,并使用水平文本列表,问题是滚动视图的高度占了屏幕的一半,即使声明为样式,它仍然保持原样。
带有滚动视图的屏幕
<View style={Style.container} >
{this.props.ExtendedNavigationStore.HeaderTitle ? <BackHeader header={this.props.ExtendedNavigationStore.HeaderTitle} onPressBack={this.goBack} /> : <Header openDrawer={this.openDrawer} />}
<ScrollView contentContainerStyle={{flexGrow:1}} style={Style.scrollableView} horizontal showsHorizontalScrollIndicator={false}>
{this.renderScrollableHeader()}
</ScrollView>
<Routes /> /* stack with dashboard screen */
</View>
</Drawer>
)
}
花柱
import {StyleSheet} from 'react-native'
import {calcSize} from '../../utils'
const Styles = StyleSheet.create({
container : {
flex:1,
backgroundColor:"#e9e7e8"
},
scrollableView:{
height: calcSize(40),
backgroundColor: '#000',
},
textCategory:{
fontSize: calcSize(25),
color:'#fff'
},
scrollableButton:{
flex:1,
margin:calcSize(30)
}
})
export default Styles
正如你所看到的黑色大小是滚动视图,我希望它是小。
在路线堆叠成 Jmeter 板屏幕时,样式:
const Style = StyleSheet.create({
container: {
backgroundColor: '#9BC53D',
flex: 1,
justifyContent: 'space-around',
alignItems: 'center'
},
text: {
fontSize: 35,
color: 'white',
margin: 10,
backgroundColor: 'transparent'
},
button: {
width: 100,
height: 75,
margin: 20,
borderWidth: 2,
borderColor: "#ecebeb",
justifyContent: "center",
alignItems: "center",
borderRadius: 40
}
})
5条答案
按热度按时间ztyzrc3y1#
ScrollView
存在一个现有的限制,即不能直接提供height
。将
ScrollView
包裹在另一个View
中,并为该View
给予高度。比如
零食样品:https://snack.expo.io/HkVDBhJoz
EXTRAS:与高度不同,为
ScrollView
提供宽度将正常工作5f0d552i2#
在ScrollView样式中使用
flexGrow:0
5anewei63#
这对我很有效:
ujv3wf0j4#
考虑到您将
fixed height
用于header
,而将flex用于路由的问题,不同设备的 * 方向无法很好地扩展,并且看起来很奇怪 *。因此,您可以考虑将其切换到
flex
下面是将
flexGrow
添加到ScrollView
的styles
的示例,因为它接受视图属性这是snack expo的链接
sshcrbum5#
在滚动视图样式内使用
maxHeight