react-native - 当我在本机反应中相应滚动时,我需要突出显示菜单
问题描述
当我单击任何菜单项时,它会滚动到正确的部分。当我滚动到其他部分时如何突出显示正确的菜单,像这样?
class List extends Component {
constructor(props) {
super(props);
this.arr = [];
}
onPressFilter(val) {
this.setState({ selectedTab: val });
let dynamicIndex = categoryArr.indexOf(val);
this.refs._scrollView.scrollTo({
x: 0,
y: this.arr[dynamicIndex] - 55,
animated: true,
});
}
render(){
return (
<ScrollView>
<ScrollView ref='_scrollView'>
{{this.props.data.map((val, index) =>
<TouchableOpacity
style={[styles.filterItem, (selectedTab === val) && {backgroundColor: themeColor}]}
onPress={this.onPressFilter.bind(this, val)} key={index}>
<Text style={[styles.filterText, (selectedTab === val) && {color: '#fff'}]}>{val.toUpperCase()}</Text>
</TouchableOpacity>)}}
</ScrollView>
{CategoryList.map((el, key) => (<View key={key}
onLayout={event => {
const layout = event.nativeEvent.layout;
this.arr[key] = layout.y;
}}>
<View style={{paddingHorizontal: 20, paddingVertical: 10}}>
<H2>{el.toUpperCase()}</H2>
</View>
<FlatList
data={DATA.filter((a, i) => a.category.name === el)}
renderItem={({ item }) => <Item item={item} data={DATA} />}
keyExtractor={item => item.id}
/>
</View>))}
</ScrollView>
)
}
}
解决方案
React 原生滚动视图有一个属性onScroll。每次用户滚动布局时,此承诺都会返回偏移量。根据偏移量,您可以设置一个范围,例如在此范围之间调用 highlight 函数,并带有要突出显示的标签的参数。
希望这会有所帮助。您需要更多信息吗,请随时回复我
谢谢
推荐阅读
- ios - 有没有办法在点击时存储 pdf 注释?
- ruby-on-rails - Rails 开关(复选框)缓存
- java - 为什么我的代码说找不到 . 象征?
- python - groupby,统计过去发生的事件,并显示最近的事件
- java - java.text.ParseException:增量> 60:60
- presto - Athena/Presto - UNNEST MAP 到列
- javascript - 如何在选择中设置默认值?
- mongodb - MongoDB:添加具有条件元素数量的字段
- python - snakemake:如何将 glob_wildcards 用于新创建的文件?
- android - 为什么值通过 xml 和代码命名不同?