React Native - 如何访问 Refs？答案

【问题标题】：React Native - How To Access Refs?React Native - 如何访问 Refs？
【发布时间】：2017-09-27 15:01:51
【问题描述】：

我正在尝试访问 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 函数中不被未定义？

【问题讨论】：

facebook.github.io/react/docs/refs-and-the-dom.html
@euvl 是的，这对我没有帮助。我已经读过了
如果您尝试ref={flatList => this.flatList = flatList} 并在您的函数中使用this.flatList 是否有效？

标签： react-native this react-navigation refs

【解决方案1】：

你的代码中的问题是

ref 采用函数而不是字符串
scrollToOffset 不使用 x、y 作为参数。如果要滚动到某个索引，请改用 scrollToIndex。
用刷新绑定 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 });
  }
}

【讨论】：

【解决方案2】：

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

【讨论】：

组件不会在选项卡更改时卸载，所以我不能每次都在 componentDidMount 上触发一些东西。
@Tenatious 正在使用像 Redux 或 Mobx 这样的状态管理器？如果您希望在componentWillReceiveProps 上滚动标签，您可以检查导航状态。我不太确定，但每次标签移动时都会触发componentDidMount 。

【解决方案3】：

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

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

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

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

【讨论】：