1

我正在尝试访问 this.refs 以便可以滚动到平面列表的顶部，但它是未定义的。

我的渲染方法是这样的：

render() {
    return (
      <View style={styles.container}>
        { this.state.loading &&
          <ActivityIndicator />
        }
        { !this.state.loading &&
          <FlatList
            ref='flatList'
            data={this.state.facebookPosts}
            onEndReachedThreshold={0}
            onEndReached={({ distanceFromEnd }) => {
              this._getFacebookPosts(this.state.nextPost);
            }}
            renderItem={({item}) => <FacebookPost
              date={item.created_time}
              message={item.message}
              image={item.attachments.data[0].media.image.src}
              url={item.link}
            />}
          />
      }
      </View>
    )
  }
}

如您所见，我将 ref 设置为“flatList”。

然后我有一个选项卡栏，当您单击其中一个选项卡时，它会滚动到列表顶部。（我只是为了不控制台注销 this.refs 但未定义）

static navigationOptions = {
    tabBarLabel: 'News',
    showIcon: true,
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('../assets/images/newspaper-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
    tabBarOnPress: (scene, jumpToIndex) => {
      // this.refs.listRef.scrollToOffset({x: 0, y: 0, animated: true})
      console.log(this.refs);
      jumpToIndex(scene.index);
    }
  };

我需要做些什么不同的事情才能使 this.refs 在 onTabBarPress 函数中不被未定义？

4

3 回答 3

2

您的代码中的问题是

  1. ref 接受一个函数而不是一个字符串
  2. scrollToOffset 不使用 x, y 作为参数。如果要滚动到某个索引，请改用 scrollToIndex。
  3. 使用刷新绑定 isLoading 比在加载后注入您的 FlatList 更好

下面的代码应该可以工作：

class MyListView extends React.Component {
  _listRef;
  ...

  render() {
    return (
      <View>
          <FlatList
            ref={ref => {this._listRef = ref; }}
            data={this.state.facebookPosts}
            renderItem={({item}) => <FacebookPost
              date={item.created_time}
              message={item.message}
              image={item.attachments.data[0].media.image.src}
              url={item.link}
            />}
            ...
            refreshing={this.state.loading}
          />
      }
      </View>
    )
  }

  scrollToIndex = (idx) => {
    this._listRef.scrollToIndex({ index: idx, animated: true });
  }
}
于 2018-01-31T23:54:35.817 回答
1

在我的选择中，您只能访问同一类中的引用。你做你想做的事，但componentDidMount在安装时使用你滚动列表

于 2017-09-27T15:26:40.530 回答
0

您似乎正在尝试访问静态属性内的类实例上的属性，该静态属性对该实例一无所知。静态属性与class非类实例相关联，因此它们的this关键字不是对类实例的引用。

看起来您正在使用，react-navigation因此您可以通过在.thisnavigationOptionscomponentDidMount

componentDidMount() {
  this.props.navigation.setParams({ instance: this });
}

然后您可以将您的定义navigationOptions为这样的函数以访问您的导航参数。

static navigationOptions = ({ navigation }) => ({
  tabBarLabel: 'News',
  showIcon: true,
  tabBarIcon: ({ tintColor }) => (
    <Image
      source={require('../assets/images/newspaper-icon.png')}
      style={[styles.icon, {tintColor: tintColor}]}
    />
  ),
  tabBarOnPress: (scene, jumpToIndex) => {
    navigation.state.params.instance.refs.listRef.scrollToOffset({x: 0, y: 0, animated: true})
    jumpToIndex(scene.index);
  }
});

这可能不是最好的方法，但它是实现它的一种方法。

于 2017-09-27T16:03:45.607 回答