首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当我相应地在react native中滚动时,需要突出显示菜单

当我相应地在react native中滚动时,需要突出显示菜单
EN

Stack Overflow用户
提问于 2020-07-15 01:58:00
回答 1查看 338关注 0票数 0

当我单击任何菜单项时,它会滚动到正确的部分。如何在滚动到其他部分时突出显示正确的菜单,如this

代码语言:javascript
运行
复制
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>
        )
    }
}
EN

回答 1

Stack Overflow用户

发布于 2020-07-15 14:59:22

React原生scrollview有一个属性onScroll。这承诺在用户每次滚动布局时返回偏移量。根据偏移量,您可以设置一个范围,如在此范围之间使用要突出显示的标签的参数调用highlight函数。

希望这能有所帮助。您需要更多信息吗,请不要犹豫,请回复我

谢谢

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62901195

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档