react-native - React.forwardRef 的问题。null 不是对象（评估'ref.current.focus'）

Question

我有一个带有 listHeaderComponent 和 listFooterComponent 的 flatList。用户添加 listItem 后，我需要将焦点放在 listFooterComponent 上。

<StyledList
      data={data}
      keyExtractor={item => item.name}
      renderItem={({item, index}) => {
        console.log('index: ' + index);
        return <FlowerListItem item={item} />;
      }}
      ListHeaderComponent={() => {
        if (isFlowerList) {
          return (
            <DiaryFlowerHeader
              onPress={onPress}
              goBack={goBack}
              focusNext={focusNext}
            />
          );
        }
      }}
      ListFooterComponent={() => {
        if (isFlowerList) {
          return <DiaryFlowerFooter ref={reference} data={data} />;
        }
      }}
    />

在页脚上，我创建了这个 forwardRef，以便稍后提供焦点。

const NextButton = React.forwardRef((props, ref) => (
    <Button
      title="next"
      hasBackgroundColor={true}
      onPress={() => {
        onPress();
      }}
      ref={ref}
    />
  ));

  if (data && data.length > 0) {
    return (
      <Container>
        <ButtonView>
          <NextButton ref={reference} />
        </ButtonView>
      </Container>
    );
  }

在主页和 nextFocus 函数上创建引用，以将焦点放在我的按钮上。

const ref = React.createRef();
  const focusNext = () => {
    ref.current.focus();
  };

  return (
    <List
      data={flowers}
      onPress={addFlower}
      goBack={navigationGoBack}
      isFlowerList
      reference={ref}
      focusNext={focusNext}
    />
  );

但是 ref 总是未定义并且在尝试给予焦点时崩溃。