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

Question

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

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?, 动画？)

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

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(); 将根据月份中的哪一天返回一个数字 1 - 31。因此，如果您将日历中每一天的 id 设置为与该月的某一天相对应的数字。以上将滚动到它。

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

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

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

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