outputRange: [0, -36], // 将上边距改为从0～-36
extrapolate: ‘clamp’ // 滚动超出0～160的范围，不在更改边距
})

return (
<AnimatedTouchableOpacity
style={styles.top_search_container(marginRight, marginTop)}
activeOpacity={0.8}
onPress={this.gotoSearch}

GoodsCategory.js 解析

render() {
return (


// 一级分类列表，采用FlatList
<FlatList
ref={refs => this.flatList = refs}
keyExtractor={(item, index) => index.toString()}
data={this.state.firstCategoryData}
renderItem={this.renderFirstCategoryItem}
ItemSeparatorComponent={this.renderSeparatorLine}
/>


// 二级、三级分类列表，采用SectionList
<SectionList
ref={refs => this.sectionList = refs}
renderSectionHeader={this.renderSecondCategorySectionHeader}
renderItem={this.renderSecondCategoryItem}
sections={this.state.secondCategoryData}
ItemSeparatorComponent={null}
ListHeaderComponent={null}
ListFooterComponent={null}
keyExtractor={(item, index) => index + item}
/>


);
}

// 点击一级分类时，需要计算滚动条的位置
onClickFirstCategoryItem = (item, index) => {
this.setState({selectedFirstCategoryIndex: index});

// 计算当前 item 的高度
const indexHeight = firstCategoryItemHeight * index;

// 计算屏幕一半的高度
const halfHeight = (height - 65) / 2;

// 如果当前 item 的高度 大于 屏幕一半的高度，就让滚动条滚动 indexHeight - halfHeight 高度（类似京东商品分类效果）
if (indexHeight > halfHeight) {
this.flatList.scrollToOffset({
animated: true,
offset: indexHeight - halfHeight,
});
}

this.sectionList.scrollToLocation({
animated: true,
itemIndex: 0,
sectionIndex: 0,
});
};

TopTabView.js 解析

/**

• 显示下拉菜单
• @param index 当前选中时的 tab 下标
  */
  showDropdownMenu = (index) =>
  {
  // measure方法测量"箭头图标"在页面中的位置、宽高
  this.arrowIcon.measure((x, y, width, height, pageX, pageY) => {
  const topOffset = pageY + height // 计算"下拉菜单"距离页面顶部的偏移量
  this.dropdownMenu.show(topOffset, index) // 显示"下拉菜单"
  })
  }

组件的 measure((x, y, width, height, pageX, pageY) => {}) 方法可以动态的获取组件在屏幕中的位置、宽高信息。measure 方法的参数 x，y 表示组件的相对位置，width，height 表示组件的宽度和高度，pageX，pageY 表示组件相对于屏幕的绝对位置。

TopDropdownMenu.js 解析

// 使用 Modal 来实现弹窗菜单，达到遮罩效果
render() {
const {isVisible, data, topOffset} = this.state;
return (
<Modal
animationType=“fade”
transparent={true}
onRequestClose={() => this.hide()}
visible={isVisible}

<TouchableOpacity
style={styles.container}
activeOpacity={1}
onPress={() => this.hide()}

<FlatList
style={[styles.content_container, {top: topOffset}]}
keyExtractor={(item, index) => index.toString()}
data={data}
renderItem={this.renderItem}
horizontal={false}
numColumns={2}
renderSeparator={null}
/>


);
}
derItem={this.renderItem}
horizontal={false}
numColumns={2}
renderSeparator={null}
/>


);
}