如何在 ScrollView 中使用 scrollTo() 滚动到特定对象？

Question

我渲染了几个部分，其中一个部分是 ScrollView。这个 ScrollView 是一个水平日历，每个项目都是一个 renderRow()，并且有 View Text 和 Button 包裹在一个 View:[=23= 中]

render()
{
    //..
    let day = this.renderDaysView();

    return(
        <View style={{ backgroundColor: 'white' }}>
            {day}
        </View>
    )
}

renderDaysView()
{
    let renderRow = (rowData, rowID) => {   
        return (
            <View key={rowID}>
                <TouchableOpacity ... >
                    <View ... >
                        <Text ... >{currentWeekDay}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    return (
        <ScrollView ref={(scrollview) => this._daysScrollView = scrollview} horizontal= 'true'> 
        {
            this.state.Days.map((item, index) => renderRow(item, index) )
        }
        </ScrollView>
    }
}

现在，当屏幕显示时，我希望今天正好在屏幕中间。

在Docs之后，scrollTo()可以接一个object:

scrollTo( y? , object , x?, animated? )

目前我正在使用这个 hack（缺少一部分），我将当前日期乘以特定值：

componentWillUpdate(newProps: Object, newState: Object) {

    this._daysScrollView.scrollTo(
        {
            x:  // if first week, do nothin
                newProps.currentDate.getDate() < 6 ?
                    0
                :   // elseif if last week, scroll to scrollView width (missing)
                    newProps.currentDate.getDate() > 27 ? 
                        (newProps.currentDate.getDate() * 55 ) - ( 7 * 52) // TODO: should be scrollview width
                :   // else someday later, put in in the middle
                    (newProps.currentDate.getDate() - 4) * 55, 

            animated: true
        }
    )
}

所以我要么需要知道 _daysScrollView 的宽度，要么跳转到该对象 - 4（使其保持在中间）

如果我的对象是组件，如何跳转到特定的对象？（例如，如果今天是19号，则转到索引19）

或者为了我的技巧，

如何获取 _daysScrollView 的宽度？(_daysScrellView.width) 不起作用谢谢

Answer 1

要使用 scrollTo 方法，您必须获得要滚动到的元素的 x/y 位置。一个更简单的解决方案可能是这样的：

componentDidUpdate() {
    let location = window.location;
    let dayOfMonth = new Date.getDate();
    location.hash = `#${dayOfMonth}`;
}

new Date.getDate(); 将 return 一个数字 1 - 31，具体取决于一个月中的哪一天。因此，如果您将日历中每一天的 ID 设置为与该月中的某一天相对应的数字。上面将滚动到它。

location.hash = `#${dayOfMonth}`;

然后会将文档滚动到具有该 id 属性的元素。

将每一天的 ID 设置为它在月份中的数字位置，window.location.hash 以路由到页面中当天的锚点。

编辑：尝试用这个 componentDidUpdate 替换你的 componentWillUpdate() 方法。

如何在 ScrollView 中使用 scrollTo() 滚动到特定对象？

How to scroll to a specific object using scrollTo() in ScrollView?

javascript

scrollview

reactjs

react-native