javascript - 如何在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() 可以采用一个对象:

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

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

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

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

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