更改元素位置反应本机

时间:2018-12-10 13:17:01

标签: javascript react-native

我是React Native的新手。我正在尝试移动两个视图并更改一个人的身高。

在过去的几天里,我一直在尝试很多事情,但我却一事无成。

enter image description here

这是我的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个小视图)移到顶部,然后将其拖到最平坦的位置并更改其高度,使其可以全屏显示。

0 个答案:

没有答案