Question

我正在尝试访问this.refs，所以我可以滚动到Flat List的顶部，但它是未定义的。

我的渲染方法是：

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函数中不被定义？

Answer 1

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

Answer 2

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

看起来您正在使用react-navigation，因此您可以通过在this中执行此操作，将实例（navigationOptions）破解到静态componentDidMount属性中。

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);
  }
});

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

Answer 3

代码中的问题是

ref接受函数而不是字符串
scrollToOffset不使用x，y作为参数。如果要滚动到某个索引，请改用scrollToIndex。
使用刷新绑定isLoading比在加载

以下代码应该有效：

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 });
  }
}

React Native - 如何访问Refs？

3 个答案: