我是React Native的新手。我正在尝试移动两个视图并更改一个人的身高。
在过去的几天里,我一直在尝试很多事情,但我却一事无成。
这是我的render()
函数:
<View ref = { 'category' } collapsable = { false } paddingTop = { this.state.topPadding } >
<FlatList horizontal data = {this.state.data} scrollEnabled = { false } paddingTop = { 10 }
renderItem = {({ item: rowData }) => {
return (
<View style = {{ alignItems: 'center', height: 80, width: 80 }}>
<Image source = {{ uri: rowData.imageUrl }} style = {{ width: 50, height: 50 }} />
<Text>Hey</Text>
</View>
);
}}
keyExtractor = {(item, index) => index} />
<FlatList horizontal data = {this.state.data} scrollEnabled = { false }
renderItem = {({ item: rowData }) => {
return (
<View style = {{ alignItems: 'center', height: 80, width: 80 }}>
<Image source = {{ uri: rowData.imageUrl }} style = {{ width: 50, height: 50 }} />
<Text>Hey</Text>
</View>
);
}}
keyExtractor = {(item, index) => index} />
</View>
<View paddingTop = { this.state.topPadding } ref = { 'posts' } collapsable = { false } >
<FlatList data = {this.state.data} scrollEnabled = { true } height = { 600 } marginTop = { 10 } onScroll={this.handleScroll}
renderItem = {({ item: rowData }) => {
return (
<View style = {{ alignItems: 'center', height: 300 }}>
<Image source = {{ uri: rowData.imageUrl }} style = {{ width: '90%', height: '80%' }} />
<Text>Hey</Text>
</View>
);
}}
keyExtractor = {(item, index) => index} />
</View>
以及我应该在哪里更改位置和高度:
handleScroll = (event) => {
var direction = event.nativeEvent.contentOffset.y - lastOffset;
if (event.nativeEvent.contentOffset.y > 0) {
if (direction < 0) { // scroll up
this.refs['category'].measure((ox, oy, width, height) => {
console.log(oy);
});
this.refs['posts'].measure((ox, oy, width, height) => {
console.log(oy);
});
} else if (direction > 0) { // scroll down
this.refs['category'].measure((ox, oy, width, height) => {
console.log(oy);
});
this.refs['posts'].measure((ox, oy, width, height) => {
console.log(oy);
});
}
}
lastOffset = event.nativeEvent.contentOffset.y;
}
如何将顶视图(其中包含10个小视图)移到顶部,然后将其拖到最平坦的位置并更改其高度,使其可以全屏显示。