React Native Typescript Typing for "Backwards" ScrollView

Question

我有一个ScrollView，它首先作为JavaScript工作，然后也作为TypeScript工作；该ScrollView使用ref属性来捕获ScrollView的引用，然后调用其函数之一scrollToEnd()。但我最近加强了我的linting，我需要找出正确的方法来键入这个引用属性实例。

我从这个开始：

import React from "react";
import {ScrollView, StyleProp, ViewStyle} from "react-native";
const standardStyle = {flex:1, backgroundColor:'black'};
export default class ViewClass {
static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) {
let scrollView : any;
return (
<ScrollView
nestedScrollEnabled={true}
ref={ref => {
scrollView = ref
}}
onContentSizeChange={() => scrollView.scrollToEnd({animated: true})}
style={[standardStyle, customStyle]}
horizontal={horizontal}>{contents}</ScrollView>
);
}
}

在与类型进行了大量的斗争后，我想出了这个，我认为这是正确的方向，但我仍然会遇到TypeScript错误。

import React from "react";
import {ScrollView, StyleProp, ViewStyle} from "react-native";
const standardStyle = {flex:1, backgroundColor:'black'};
export default class ViewClass {
static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) {
let scrollView : React.RefObject<ScrollView> | ScrollView | null = React.createRef();
return (
<ScrollView
nestedScrollEnabled={true}
ref={ref => {
// below: scrollView maybe assigned "ScrollView" or "null"
scrollView = ref
}}
// below: scrollView is possibly null
// also below: "Property 'scrollToEnd' does not exist on type 'ScrollView | RefObject<ScrollView>'."
onContentSizeChange={() => scrollView.scrollToEnd({animated: true})}
style={[standardStyle, customStyle]}
horizontal={horizontal}>{contents}</ScrollView>
);
}
}

我的场景当然使用ScrollView，所以我想如果有更好的方法让ScrollView从底部开始，那么可能会修复我在这个例子中的代码。但我认为这个问题是可以概括的，因为我的主要问题是我无法弄清楚我的对象引用的类型需要什么，以及如何调用它上的函数

注意：我还是React Native和TypeScript的新手，所以我可能会慢慢跟上。

Answer 1

您的代码将ref对象的值与ref对象本身混合在一起。ref是一个对象，其属性current包含您保存的值。类型let scrollView: React.RefObject<ScrollView> | ScrollView表示它可以是组件本身，也可以是该组件的引用。这就是为什么你会犯这些错误。

有多种方法可以实现ref，但让我们坚持您正在做的事情，即使用React.createRef创建ref。这创建了一个ref对象，我们用它来存储组件ref。为了清楚起见，我将把它重命名为scrollRef。

const scrollRef = React.createRef<ScrollView>(); // has type React.RefObject<ScrollView>

在回调中使用ref时，需要使用scrollRef.current来获取ScrollView对象。React.RefObject<ScrollView>['current']的值要么是ScrollView，要么可以是null，所以在调用scrollToEnd之前，我们需要一个可选的链接?.。

onContentSizeChange={() => scrollRef.current?.scrollToEnd({animated: true})}

对于ScrollView的ref道具，我们可以直接传递整个ref对象。

ref={scrollRef}

把这些放在一起，我们得到：

export default class ViewClass {
static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) {
const scrollRef = React.createRef<ScrollView>();
return (
<ScrollView
nestedScrollEnabled={true}
ref={scrollRef}
onContentSizeChange={() => scrollRef.current?.scrollToEnd({animated: true})}
style={[standardStyle, customStyle]}
horizontal={horizontal}>{contents}</ScrollView>
);
}
}

打字游戏场链接